Question

我正在学习HTML和CSS。我想用CSS分割我的div。我希望我的页面有一个顶部栏，只有三个链接，链接之间有大量空间。我的问题是我不确定如何获得链接之间的空间。这可以不使用表格来完成吗？

         Home                     About                      Songlist

Answer 1

这是您描述的布局的标记（没有所有样式 - 只是布局）......

<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;
}

Answer 2

我喜欢史蒂夫的回答，但这是使用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;
}

Fiddle以供参考。

祝你选择哪条路径好运！

Answer 3

在容器元素上使用text-align: justify;。

然后拉伸内容以占据100％宽度

<强> FIDDLE

MARKUP

<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;
}

Answer 4

您需要使用float css属性，并结合margin / padding或width。浮动的想法在开始时有点棘手，但很快就会成为第二天性。

此外，正如评论一致，您应该考虑使用<ul>和<li> HTML标记。

A tutorial for float

如何在<div>标签中提供分区？</div>

4 个答案:

MARKUP

CSS