0

私は次のHTMLとCSSを持っています

<div class="menus">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
</div>

.menus a
{
    height: 2em;
    display: inline;
    float: left;
    width: 4em;
    margin: 0.3em;
}

最初の3つのリンクを上部に、最後の3つを「メニュー」コンテナの下部に配置しようとしています。

ここに画像の説明を入力してください

HTMLでの回答に続いて：同じコンテナ内の上部と下部のv-align、最初の3つと最後の3つを独自のコンテナに入れようとしましたが、幅が失われます

header .menus .firstThree
{
    position: absolute;
    top: 0;
}

header .menus .lastThree
{
    position: absolute;
    bottom: 0;
}

ここに画像の説明を入力してください

：nth-​​childを使ってみましたが、すべて積み重ねられています:(

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

私は絶対的な垂直位置のようなものが必要ですが、相対的な水平位置です.. :)

4

2 に答える 2

0

私はそれを動作させることができました：

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

header .menus a:nth-child(2)
{
    margin-left: ...
}

header .menus a:nth-child(3)
{
    margin-left: ...
}

header .menus a:nth-child(4),
header .menus a:nth-child(5),
header .menus a:nth-child(6)
{
    position: absolute;
    bottom: 0;
}

header .menus a:nth-child(5)
{
    margin-left: ...
}

header .menus a:nth-child(6)
{
    margin-left: ...
}
于 2013-01-09T15:57:06.193 に答える
0

メニューdiv内のul要素とli要素を使用し、cssを使用してdivの高さと幅を設定してから、liを基準にした位置を使用します。

絶対位置を使用している場合は、すべての要素にスタイルを設定することを忘れないでください。

ありがとう、

シャールク

于 2013-01-09T10:18:21.307 に答える