如何在 <div> 标签中给出分区？答案

【问题标题】：how do I give partition in the <div> tag?如何在 <div> 标签中给出分区？
【发布时间】：2013-06-30 08:05:47
【问题描述】：

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

         Home                     About                      Songlist

【问题讨论】：

在每个 div 分区上使用一些 margin-left / padding-left / width 33% / ...
看看这个stackoverflow.com/questions/9349109/…
虽然下面的答案会起作用，并且对学习很有用，但您最终会发现最好使用网格系统以可重用（非常重要！）的方式解决这类问题（我推荐 @ 987654322@），并在不久的将来使用 flexbox（Bocoup Group 的优秀文章：weblog.bocoup.com/dive-into-flexbox）。祝你学习顺利——它永远不会无聊！ :D

标签： html css

【解决方案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;
}

【讨论】：

您可能还想在其中包含box-sizing:border-box;。这将防止任何padding/margin 搞砸布局

【解决方案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 供参考。

祝你无论选择哪条路都好运！

【讨论】：

【解决方案3】：

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

然后将内容拉伸到 100% 宽度

FIDDLE

标记

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

【讨论】：

您能否解释一下内容：“”是如何发挥作用的？非常感谢。请在答案中编辑。

【解决方案4】：

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

另外，正如评论所言，您应该考虑使用<ul> 和<li> HTML 标签。

A tutorial for float

【讨论】：

内联块也是一个很好的解决方案。无论如何，如果你是一个初学者，你应该练习你的“浮动肌肉”
@Giliweed 如果您将它们全部浮动left，它们将根据您的需要堆叠 - 尽管您需要处理后面的内容，因为float 将元素从文档流中取出。 inline-block 保留文档流。
有没有css属性，"float:middle;" ?只是问，即使我得到了我的解决方案。
浮动的工作方式是让元素一个接一个地水平显示。如果对三个元素使用 float left，第一个在左端，第二个在中间，第三个在右端。如果你使用 float: right - 顺序会颠倒