4

親クラス（タグ）が互いに重複するタグulの束を保持するようにします。これが私のコードです：li

<ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>

背景の境界線と色を持つ親要素があるため、それらを絶対に配置したくありませんが、子を絶対に配置すると、親は伸びません。コード全体を次に示します。

<blockquote>
 <ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>
</blockquote>

タグにはblockquote背景色があるため、子を完全に配置することはできません。

助けてくれてありがとう！

4

2 に答える 2

5

このような？http://jsfiddle.net/2N8Jz/

<blockquote class="clearfix">
  <ul class="overlap">
    <li>Overlap One</li>
    <li>Overlap Two</li>
    <li>Overlap Three</li>
  </ul>
</blockquote>
​

blockquote {
    border: 1px solid black;    
    padding: 10px;
}

.overlap {
    padding-left: 10px;
}

.overlap li {
    border: 1px solid grey;
    float: left;
    margin: 0 0 0 -10px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
​
于 2012-05-17T20:24:03.263 に答える
1

<li>'sa ネガティブを与えるmarginとうまくいくはずです。

ここに例があります: http://jsfiddle.net/wvEms/1/

于 2012-05-17T20:28:37.163 に答える