如何使导航中的href跨越整个div答案

【问题标题】：How to make a hrefs in nav span the entire div如何使导航中的href跨越整个div
【发布时间】：2013-03-22 03:29:10
【问题描述】：

我正在尝试让我的导航跨越整个 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;
}

【问题讨论】：

"a" 是一个内联标签。对于您想要的，您需要将其转换为块元素。使用display:block; 并从那里获取。

标签： html css href nav

【解决方案1】：

您的设置存在一些问题（例如：您有多个 ids，这是一个禁忌，所以我将它们更改为 classes） .

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

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

这个小提琴应该有帮助：

小提琴：
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;
}

【讨论】：

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

【讨论】：

这会将它们垂直排列。我正在尝试将它们水平排列。
最好使用列表来排列您想要的菜单结构。请参阅更新的小提琴。但其他人也已经提出了很好的解决方案.. :)

【解决方案3】：

使用class 而不是id 顺便说一下，这个article 可以帮助您理解为什么在当前代码中使用class 而不是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

希望对你有帮助

【讨论】：