1

この質問は回答済みです

2 つの順序付けられていないリストを含むこの div があります。これらのリストを上下ではなく、隣り合わせに配置したいと考えています。

これは私が思いついた最高のものですが、フロートが追加されるとリストがコンテナから飛び出すように見えますか?

なぜこれが起こるのですか？ULのフロートと関係があるようです。

少しフィドル http://jsfiddle.net/ynSdU/3/

CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95;height: 50px;}
.products_overview ul{list-style:none;float:left;border-left:1px solid #666;margin:20px 0px 10px 30px;padding:10px;} 
.products_overview li.ldd_heading {font-family: Georgia, serif;font-size: 13px;font-style: italic;color: #333; padding:0px 0px 10px 0px;}
.products_overview li.ldd_heading a.link {font-family: Georgia, serif;font-size: 13px;font-style: italic;color:#333;padding:5px 3px 5px 3px; }
.products_overview ul li a{font-family: Arial, serif;font-size:10px;line-height:20px;color:#333;padding:1px 3px;text-decoration:none;}
.products_overview ul li a:hover{-moz-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333;background: #CCC;}

HTML

次のコードは、クラスの DIV で囲まれています: products_overview!!!

<ul>
    <li class="ldd_heading"><a class='link'>header</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>                           
</ul>  
<ul>
    <li class="ldd_heading">header</li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>   
    <li><a href="#">3</a></li>                                  
</ul>
4

3 に答える 3

2

overflow:hidden親divに与えるだけです

実際には、子要素でフロートを使用する場合は、それらのフロートをクリアする必要があるため、そうしなかったのでoverflow:hidden、親の div フロート要素を定義してクリアします。

CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95; overflow:hidden;}

http://jsfiddle.net/ynSdU/4/

于 2012-08-21T07:06:34.503 に答える
1

clearfix を追加する必要があります。

span.clearフロートをクリアするために を使用しました。

...<li><a href="#">3</a></li>                                  
</ul>
<span class="clear">&nbsp;</span>
</div>

CSS:

span.clear
{
    clear: both;
    display: block;
}

http://jsfiddle.net/Kyle_Sevenoaks/ynSdU/7/

読みやすくするために、この方法を使用することを好みます。を見てspan.clear、フロートをクリアしたことがわかります。他の方法も同様に機能します。:)

于 2012-08-21T07:07:57.613 に答える
0

フロートを使用するとレイアウトから除外されるため、含まれる div の高さに影響しなくなります。

必要なのは、コンテナでこれだけです。

.products_overview {overflow:hidden}
于 2012-08-21T07:08:41.117 に答える