2013-02-26 58 views
2

的jsfiddle未对齐:http://jsfiddle.net/UXA5Q/第一个孩子列表项目在Chrome浏览器(苹果机/ Windows)中

我有以下的HTML代码:

 <ul class="advisorlist"> 
      <li>      
       <div class="employee"> 
        <address> 
         <a title="E-mail John Doe" href="http://www.example.com/employee.html" rel="nofollow" class="email"><strong>John Doe</strong></a> 
         <br><em>Academic Advisor</em> 
         <br>Phone: 540-351-5555       
         <br>Fax: 540-351-5555        
        </address>           
       </div>           
      </li>          
      <!-- etc --> 
     </ul> 

下面CSS代码:

ul.advisorlist { 
    clear:both; 
    list-style: none; 
} 
ul.advisorlist li { 
    float: left; 
    padding: 0; 
    margin: 10px 10px 0 10px; 
    width: 140px; 
    min-height: 200px; 
    height: auto !important; 
    height: 200px; 
} 

列表中的第一项在Mac/Windows上的Chrome中未对齐。 Chromium,FF,Safari,IE等正确显示所有列表项。

Image of non aligned first child

任何想法?

回答

1
clear: both

意味着没有漂浮元件可邻近于在任一侧上的较早浮箱。

clear属性指示元素框的哪些边可能不与先前的浮动框相邻。

http://www.w3.org/wiki/CSS/Properties/clear

clear一些更非常详细的信息:http://www.w3.org/TR/CSS2/visuren.html#flow-control

删除它,你要找好。

另外,你有一堆CSS没有多大作用!看看这个jsFiddle fork我放在一起。

+0

感谢您对清楚的信息! 其他的东西是有用的,例如。最小高度是针对这些列表项目中的图像,但我为这个问题严格删除了列表项目。 – 2013-02-26 20:08:46

0

卸下摆臂清楚:无论是从李的父母和添加溢出:隐藏到UL

+0

已接受答案。但为什么'溢出:隐藏'?我很好奇 – 2013-02-27 22:19:11

0
li { 
list-style-position: inside; 
} 

为我工作。谢谢大家的努力!