删除#from：

＃ul.nav 

使用表格标签对齐它。

 <   table  >  
<   ul     class   =  nav >  
<   tr  >  
<   td  >  
<   li     class   =  whoweare >  
<   img     src   =  images / cars.png >  <   a     href   = ＃  >  CARS <   / a  >  <   / li  >  
<   / td  >  
<   td  >  
<   li     class   = 服务 >  
<   img     src   =  images / jobs.jpg >  <   a     href   = ＃ >  JOBS <   / a  >  <   / li  >  
<   / td  >  
<   td  >  
<   li     class   =  contact >  
<   img     src   =  images / services.jpg >  <   a     href   =  ＃ > 服务<   / a  >  <   / li  >  
<   / td  >  
 <   / tr  >  
<   / ul  >  
<   / table  >  

i want to align these images and text in one line here is the code
css

#ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
 
}

ul.nav li {
  float: left;
  text-align:left;
  width: 23%;
   font-family:Cambria;
  font-size:large;

}
ul.nav li img{
  display:block;
}

html

h2>Select Cateogry</h2> 
    
    <ul class="nav">
  <li class="whoweare"><img src="images/cars.png"><a href="#">CARS</a></li>
  <li class="services"><img src="images/jobs.jpg"><a href="#">JOBS</a></li>
  <li class="contact"><img src="images/services.jpg"><a href="#">SERVICES</a></li>
</ul>

please check this image
http://i61.tinypic.com/szfwk2.png[^]

remove the # from:

#ul.nav 

Use table tag to align it.

<table>
    <ul class="nav">
        <tr>
            <td>
                <li class="whoweare">
                    <img src="images/cars.png"><a href="#">CARS</a></li>
            </td>
            <td>
                <li class="services">
                    <img src="images/jobs.jpg"><a href="#">JOBS</a></li>
            </td>
            <td>
                <li class="contact">
                    <img src="images/services.jpg"><a href="#">SERVICES</a></li>
            </td>
        </tr>
    </ul>
</table>