2

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

         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

您需要使用floatcss 属性，结合边距/填充或宽度。浮动的想法一开始有点棘手，但很快就会成为第二天性。

<ul>此外，正如评论的那样，您应该考虑使用<li>HTML 标签。

浮动教程

于 2013-07-02T19:46:24.280 回答