2

JSFiddle：http: //jsfiddle.net/UXA5Q/

我有以下 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 等正确显示所有列表项。

未对齐的第一个孩子的图像

有任何想法吗？

4

4 回答 4

3

尝试删除clear:both;.ul.advisorlist

jsFiddle 示例

于 2013-02-26T19:58:47.683 回答
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 叉子。

于 2013-02-26T20:03:39.303 回答
0

. 从 li 的父级中删除 clear:both 并添加 overflow: hidden 到 ul

于 2013-02-27T03:39:40.357 回答
0 
li {
list-style-position: inside;
}

为我工作。感谢大家的努力！

于 2013-06-11T13:45:35.017 回答