1

おはようございます、

display: -webkit-box要素を別の要素内にネストするとdisplay: -webkit-box、その要素をフレキシブル ボックスとして適切に含めることができません。下の画像の削除ボタンの後ろにあるテキストを参照してください。

ここに画像の説明を入力

LI HTML:

<li>
    <div class="reference">
        <div class="number">1.</div>
        Lawson, B. Sharp, R. (2011). <em>Introducing Html5.</em> New Riders Pub
    </div>
    <div class="edit">
        <button class="delete">Delete</button>
    </div>
</li>

LI CSS (美学は省略):

li {
    display: -webkit-box;
    -webkit-box-align: center; /* Vertically center elements within LI */
}
.reference {
    -webkit-box-flex: 1; /* Expand to fill space */
    display: -webkit-box;
}
.number {
    width: 3ex;
    padding: 0 5px 0 0;
}
.edit {
    /* I have tried setting a width and -webkit-box-flex: 0,
    but this does not solve the problem. */
}

ビューポートの幅が変化しても .reference が柔軟であることが重要です。

この問題は .reference を削除することで解決できますdisplay: -webkit-box;が、これは .reference 内の要素にフレキシブル ボックス モデルを使用できず、項目番号 (1.、2. など) を独自の列に保持する必要があることを意味します。

どんな助けでも大歓迎です。敬具。

4

1 に答える 1

0

の代わりに、などを使用display: tableして目的を達成できます-webkit-box。必要なのは、マークアップを少し変更するだけです。

<li>
    <div class="reference">
        <div class="number">1.</div>
        <div class="title">Lawson, B. Sharp, R. (2011). <em>Introducing Html5.</em> New Riders Pub</div>
    </div>
    <div class="edit">
        <button class="delete">Delete</button>
    </div>
</li>

そしてCSS：

ul {
    display: table;
}

li {
    display: table-row;
}

.number {
    width: 5%;
    display: table-cell;
}

.title {
    display: table-cell;
    width: 85%;
}

.edit {
    display: table-cell;
    width: 10%;
}

明らかに、プロパティを調整する必要がありますwidthが、これは機能し、クロスブラウザのサポートが向上するはずです。

于 2012-05-08T07:01:33.070 に答える