2013-02-26 56 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; 
} 

爲我工作。謝謝大家的努力!

相關問題