1

順序付けされていないリストがあり、最後のアイテムが左に浮かび、最後のアイテムが右に浮かんでいます。ここの例のように: http://jsfiddle.net/AkwnJ/。

私がやりたいのは、LI #9 (灰色) で、8 番目のアイテムと 10 番目のアイテムの間のスペースを埋めることです。しかし、これを行う方法がわかりません。誰かが私に方法を教えてくれませんか。私はこの例に従うことを試みてきました: http://jsfiddle.net/bYmM4/7/これはここから取られました: Filling space between floating elements。ただし、この例では DIV を使用していますが、私は UL を使用しているため、わずかに異なります。しかし、確かに同じ原則が適用されますか?

うまくいけば、ここの誰かがどれが大きな利益になるか知っていますか?

jsFiddle に移動する手間を省くために、私の HTML と CSS は次のとおりです。

HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li class="fill"><div>9</div></li>
    <li class="end">10</li>
</ul>

CSS:

html, body{
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    text-align: center;
    display: inline-block;
    width: 30px;
    height: 30px;
    float: left;
    border: black 1px solid;
}

li.end {
    float: right;
}

li.fill {
    overflow: hidden;
}

li.fill div {
    background-color: gray;
    height: 100%;
    width: 100%

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ありがとう！

編集：コードを少し削除しました。

4

2 に答える 2

4

最後の要素は、最後から 2 番目、ワイド要素の直前にする必要があります。また、ワイド要素には display: block と width: auto が必要です。

http://jsfiddle.net/HkChk/

li.fill {
    overflow: hidden;
    float: none;
    position: relative;
    width: auto;
    display: block;
}
于 2013-08-23T09:26:43.323 に答える