将图像和文本对齐在一行中 [英] align images and text in one line

问题描述

我想将这些图片和文字对齐在一行这里是代码

css

＃ ul 。 nav  {
  list-style  ： 无;  
  border-top  < span class =code-keyword>：  20px solid #FFF;  
 
} 
 
  ul 。 nav   li  {
  float  ：  left;  
  text-align  ：  left;  
  width  ：  23％;  
  font-family  ：  Cambria;  
  font-size  ： 大;  
 
} 
  ul 。 nav   li   img  {
  display  ：  block;  
} 

html

 h2>选择Cateogry <   / h2  >  
 
 <   ul     class   =  nav >  
 <   li     class   =  whoweare >  <   img     src   =  images / cars.png >  <   a     href   =  ＃ >  CARS <   /一个 >  <   / li  < span class =code-keyword>>  
 <   li     class   =  services >  <   img     src   =  images / jobs.jpg >  < ;   a     href  < span class =code-keyword> = ＃ > 作业<   / a  >  <   / li  >  
 <   li    类  = 联系人  >  <   img     src   =  images / services.jpg >  <   a  < span class =code-attribute>   href   = ＃ > 服务<   / a  >  <   / li  >  
 <   / ul  >  

请查看此图片

http://i61.tinypic.com/szfwk2.png [ ^ ]

解决方案

删除#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>

这篇关于将图像和文本对齐在一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！