0

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

3 回答 3

1

您的设置有一些问题（例如：您有多个ids，这是一个 no-no，所以我将它们更改为classes）。

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

我已将该font-size属性设置#nav为 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;
}
于 2013-04-01T02:58:49.517 回答
0

顺便说一下，这篇文章可以帮助您理解为什么在当前代码中使用 class 而不是classidid

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

工作演示

希望这对你有帮助

于 2013-04-01T03:04:19.067 回答
0

在你的 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;
}
于 2013-04-01T02:54:11.813 回答