1

私は にul包まれてい.boxます。の下枠を設定しました.box。ulアイテムにも下の境界線があります。境界線が見えないように、境界線を境界線liの上に配置します。設定でやろうとしているのですがうまくいきません。.box.boxmargin-bottom: -1px

添付の画像をご覧ください：

ここに画像の説明を入力

これが私が試していることです：

HTML:

<div class="box">
    <ul>
        <li>Hello</li>
         <li>World</li>
    </ul>    
</div>

CSS:

.box{
    border-bottom: 1px solid blue;
    overflow: hidden;   
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li{
    float: left;
    background: green;
    border: 1px solid red;
}

デモ: http://jsfiddle.net/b9H2j/

4

2 に答える 2

1

HTML 構造の変更を検討したことがありますか? 現在の HTMl で達成しようとしていることを行うのは、私には「不自然」に思えます。とにかく、ここに別の解決策があります。ただし、リスト項目の高さを設定する必要があります。

次のようなことができます。

HTML

<div class="box">
<ul>
    <li class="left">Hello</li>
     <li class="left">World</li>
    <li class="add-bottom-border">something</li>
</ul>    
</div>

CSS

.box{
    display:table; /* overcome the clear bug */
    width:100%;

}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li{
    height:20px;
    background: green;
    border: 1px solid red;
}

.add-bottom-border {
    overflow:auto;
    border-bottom: 1px solid blue;    

}

.left {
    float:left;    
}

JSフィドル

overflow:auto; の背後にある理由についての説明があります。ここに。

于 2013-09-28T17:15:52.157 に答える
1

問題

基本的にをその親liからオーバーフローさせたいのですが、で設定されています。.box.boxoverflow:hidden;

解決

考えられる解決策は、最初に を設定しliてposition:relative;から でオーバーフローさせることbottom:-1px;です。overflow:hidden;次に、コンテナーから取り出して.box、明確なバグを克服する別の方法を見つけます。

例えば：

.box {
    display:table; /* overcome the clear bug */
    width:100%;
    border-bottom: 1px solid blue; 
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    position:relative;
    bottom:-1px;
    float: left;
    background: green;
    border: 1px solid red;
}

jsFiddle のデモを見る

于 2013-09-28T16:34:15.947 に答える