html - 如何使导航中的 hrefs 跨越整个 div

Question

我试图让我的导航横跨整个 div，我希望它们的背景颜色/目标宽度为 33%

<nav>
<a href="index.html" id="nav1">Home</a>
<a href="lesson1.html" id="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a>
</nav>

#nav1 {
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
}
#nav2 {
    background-color: #c73d00;
    color: white;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
    text-decoration: none;
}

Answer 1

您的设置有一些问题(例如:您有多个 id，这是不行的，所以我将它们更改为类es)。

我也经历过并尝试删除一些重复的样式。所以你会看到很多按钮样式都被压缩成一个 #nav a 样式，然后自定义颜色被应用到不同的样式中。

我已将 #nav 中的 font-size 属性设置为 12px，但这仅用于演示目的。请根据您的喜好进行编辑。

这个 fiddle 应该有帮助:

fiddle :
http://jsfiddle.net/fACmM/

HTML:

<div id="nav">
<a href="index.html" class="nav1">Home</a>
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a>
</div>

CSS:

#nav
{
    width:100%;
    font-size:12px;
}
#nav a
{
    width:33%;
    float: left;
    color: white;
    padding: 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
    text-align:center;
}

.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}