1

水平分布のスタイルを設定しようとしています (行にいくつの要素があるかわかりません)。このフィドルhttp://jsfiddle.net/thirtydot/jwJBd/で探しているものを正確に見つけましたが、最初と最後の要素の最初と右のマージンに左マージンを持たない方法があればいいのにと思います行の（他のマージンを維持しながら）...基本的に私が望むのは、最初と最後の要素がレイアウトの極端に並ぶが、それらの間にスペースがあることです）。

これを行う方法はありますか？SO でこの主題に関連するすべての質問を見てきましたが、私の HTML に正確に適合するものはないようです...私がやろうとしないプラグイン ) 必要に応じて JavaScript を使用できますが、むしろ CSS を使用したいと考えています。混乱を避けるために、私のレイアウトはポートフォリオ レイアウトであり、メニューではありません。

HTML

<div style="width: 100%">
    <ul id="horizontal-style">
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Short Item</a></li>
        <li><a href="#">Really Long Nav Item</a></li>
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Another Link</a></li>
    </ul>
</div>

CSS

#horizontal-style {
    display: table;
    width: 100%
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999
}

div {
    background: #ccc
}
4

2 に答える 2

1

各行の最初と最後の要素の最初と右のマージンに左マージンを持たない方法があれば（他のマージンを維持しながら）...本質的に私が望むのは、最初と最後の要素がレイアウトの両端に沿って整列しますが、それらの間にスペースがあります)。これを行う方法はありますか？

各行の最初と最後の要素に外側のマージンを持たせ、要素の両側に対応する負のマージンを与えることでそれらを非表示にしULます。

于 2013-05-06T12:37:18.897 に答える
1

first-child最新のすべてのブラウザーで動作し、IE7.0 に戻ります。安全に使用できると確信しています。

次のように CSS を変更します。

#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 0 0 5px; /* change here*/
    background: #999
}

/*add this*/
#horizontal-style li:first-child a {
    margin-left: 0;
}

jsフィドル

複数の行とさまざまな要素の量を持つ別の jsFiddle 。

于 2013-05-05T13:37:56.790 に答える