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 s，这是一个禁忌，所以我将它们更改为{{1 }} ES）。

我也经历了尝试删除一些重复的造型。因此，您会看到许多按钮样式已压缩为一种class样式，然后自定义颜色已应用于不同的样式。

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

这个小提琴应该有所帮助：

<强>小提琴：
http://jsfiddle.net/fACmM/

<强> HTML

#nav

<强> CSS：

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

Answer 2

为你的CSS添加了display：block。

请参阅小提琴：http://jsfiddle.net/djwave28/audAt/6/

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

nav ul {
    list-style:none;
}
nav ul li {
    float:left;
    width:30%;
}
#nav1 {
    position:relative: float:left;
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    display:block;
}
#nav2 {
    display:block;
    position:relative: float:left;
    background-color: #c73d00;
    color: white;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
}

Answer 3

使用class代替id，方法article帮助您理解为什么使用类而不是使用当前代码的id

HTML

<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>
</nav>

CSS

nav {width:960px}
nav a {
    float:left; 
    text-decoration: none;
    padding: 10px 50px 10px 50px;
    font-size: 1.3em;
    color: white;
}
.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}

工作demo

希望这能帮到你

如何在导航中制作hrefs跨越整个div

3 个答案: