1

長いタイトル、ごめんなさい。

<li>通常、リストを使用してグリッド レイアウトを作成する場合、と の幅は固定されてい<ul>ます。次に、左マージンを<li>コンテナに負の左マージンとして配置し<ul>、全体を引き戻して完全に並べます。

しかし、これをパーセンテージで機能させることができず、わかりません。明らかな何かが欠けていると思います。1 行に 3 つの項目が収まる必要があります。

各 li は 32% で、3 つ連続すると 96% になり、2% の左マージンは 102% になり、マイナスのマージン左は -2% の ul で再びバランスをとります。

一部の HTML

<div class="container">
    <div class="row">
        <ul>
            <li><div class="inner">Item 1</div></li>
            <li><div class="inner">Item 1</div></li>
            <li><div class="inner">Item 1</div></li>
        </ul>
    </div>
</div>

一部のCSS

.container {
    padding: 30px;
}
.row {
    width: 100%;
    overflow: hidden;
}
ul {
    margin: 0 0 0 -2%;
    padding: 0;
    overflow: hidden;
}
li {
    width: 32%;
    float: left;
    margin: 0 0 0 2%;
    list-style: none;
}
.inner {
    border: 1px solid #ccc;
    padding: 10px;
}

そして生意気なフィドル

http://jsfiddle.net/davidpauljunior/6DEv9/

PIXELS と負のマージンを使用してどのように機能するかを示す別のフィドルをここに示します。目的は、3 つのアイテムが一列に完全に収まるようにすることです。 http://jsfiddle.net/davidpauljunior/6DEv9/5/

4

2 に答える 2

1

この問題は、LI の幅が親要素 (この場合は UL) のパーセンテージであるため発生しますが、問題は、親要素に負のマージン (この場合は -2%) を設定すると、親要素を 102% にしますが、親要素が 100% であることから計算が外れるため、スペースが残ります。これを行って完全に適合させる唯一の方法は、UL に負のマージンを持たないようにすることですが、この jsFiddleのような ":first-child" セレクターと以下のコードを使用して、最初の LI のマージンを削除します。

ul {
    background-color: red;
    list-style: none outside none;
    overflow: hidden;
    padding: 6px 0;
}
li {
    background-color: #FFF;
    float: left;
    margin-left: 2%;
    width: 32%
}
li:first-child {
    margin-left: 0;
}

お役に立てば幸いです -
エリヤ

于 2013-07-25T03:14:45.877 に答える
0

幅を % で指定しようとすると、各アイテムの幅は 32% になり、32*3 は 96% になり、各アイテムのマージンが 2% の場合、合計は 102% になり、幅は 100% になり、現在のリストは常にマージンを使用するかどうかにかかわらず、コンテナーの幅に応じた幅は、マージンを含む合計リスト項目でコンテナーの幅を分割する必要があります http://jsfiddle.net/6DEv9/2/

これを使って

li {
    width: 31%;
    float: left;
    margin: 0 0 0 2%;
    list-style: none;
}
于 2013-07-25T02:31:14.040 に答える