2

HTMLとCSSを学んでいます。divCSS の使用を分割したい。ページのトップ バーに 3 つのリンクのみを配置し、リンク間に十分なスペースを確保したいと考えています。私の問題は、リンクの間にスペースを入れる方法がわからないことです。これは、テーブルを使用せずに実行できますか?

         Home                     About                      Songlist
4

4 に答える 4

4

ここに、あなたが説明するレイアウトのマークアップがあります（すべてのスタイルなし - レイアウトのみ）...

<ul class="menu">
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/songs">Songlist</a></li>
</ul>

そして、CSS

ul.menu {
    margin: 0;
    padding: 0;
    text-align: center;
}

ul.menu li {
    display: inline-block;
    width: 33%;
}

ul.menu a {
    display: block;
    width: 100%;
    padding: 0.2em 0;
}
于 2013-07-02T19:45:22.210 に答える
3

私はスティーブの答えが好きですが、3 つの別々の Div を使用して同じ結果を得る別の方法を次に示します。

HTML:

<div class="example">
    <a href="">Home</a>
</div>
<div class="example">
    <a href="">About</a>
</div>
<div class="example">
    <a href="">Songlist</a>
</div>

CSS:

.example
{
    float:left;
    width: 33%;
    background: lightgrey;
    text-align: center;
}

参照用のフィドル。

あなたが選んだ道で頑張ってください！

于 2013-07-02T19:50:13.207 に答える
2

text-align: justify;コンテナ要素で使用します。

次に、コンテンツを伸ばして 100% 幅にします

フィドル

マークアップ

<div class="container">
<div class="example">
    <a href="">Home</a>
</div>
<div class="example">
    <a href="">About</a>
</div>
<div class="example">
    <a href="">Songlist</a>
</div>
</div>

CSS

.container {
    text-align: justify;
    padding: 0 50px;
    background: aqua;
    height: 30px;
    line-height: 30px;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.example {
    display: inline-block;
}
于 2013-07-02T20:00:12.110 に答える
0

floatマージン/パディングまたは幅と組み合わせてcssプロパティを使用する必要があります。フロートのアイデアは最初は少しトリッキーですが、すぐに慣れるでしょう。

また、コメントされているように、HTML タグの使用<ul>を検討する必要があります。<li>

float のチュートリアル

于 2013-07-02T19:46:24.280 に答える