0

HTML：

<div class="list">
<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li>
        <ul>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C3</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C5</a></li>
        </ul>
    </li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
</ul>
</div>

CSS：

.list{
width:300px;
}

a{
text-decoration:none;
color:#000;
}

.list ul{
padding:0 0 0 12px;
list-style:none;
}

.list ul li{
margin-bottom:8px;
padding-bottom:8px;
border-bottom:1px dashed #CCC;
}

.list ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left;
}

.list ul li ul{
padding:0 0 10px 15px; 
}

.list ul li ul li{
margin:4px 0;
min-height:7px;
border:none;
}

.list ul li ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left; 
}

動的コンテンツのため、リストアイテムの値がどうなるかわかりません。1行でも問題ありませんが、リスト項目に2行ある場合は、下の画像のようにリストのborder-bottomがシフトします。

ここに画像の説明を入力してください

タグcssから「float：left」を削除すると、改善されますが、サイトで他の問題が発生するため、削除したくありません。他の方法でこれを修正するにはどうすればよいですか？

4

2 に答える 2

2

に追加overflow: hiddenしてみてください.list ul li

于 2012-12-20T15:50:22.130 に答える
2

リンクをフロートさせたい場合は、親をクリアフィックスする必要があります。

.list ul li:after{
  content: "";
  display: table;
  clear: both;
}

JSFiddleで表示します。clearfixingの詳細については、こちらをご覧ください。

于 2012-12-20T15:53:50.537 に答える