html - 如何在 <div> 标签中给出分区？

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