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

. clear:both を li の親から削除し、overflow: hidden を ul に追加します

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

私のために働いた。ご尽力いただきありがとうございます。

于 2013-06-11T13:45:35.017 に答える