1

我正在尝试使用 HTML 和 CSS 制作一个带有导航栏的基本网站，但我遇到了问题 [如下]： 

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}


<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div> 
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>

<!-- More DIVs in the container -->

</div>

问题是 - 我所有的导航按钮都堆叠在一起，而不是一行。我究竟做错了什么？

页面的问题

4

4 回答 4

3

不要让它们成为 div，而是在列表中使用锚标记。这是您的图像和完整的工作代码：

在此处输入图像描述

<html>
<head>
<style>

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}


a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}

</style>
</head>

<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > <a href="#">  Home </a></li>
<li id="navigation_button_2" > <a href="#">  About </a></li>
<li id="navigation_button_3" > <a href="#">  Services </a></li>
<li id="navigation_button_4" > <a href="#">  Contact </a></li>
</ul>
</div>

<!-- More DIVs in the container -->

</div>
</body>
</html>
于 2013-11-16T10:04:07.497 回答
1

问题是divs 是块元素，因此它们自然地将自己定位在彼此之上。您可以使用多种方法使它们正常运行。在大多数情况下，我更喜欢将 adisplay: inline-block应用于您的课程。.navigation_button但是，在这种情况下， afloat: left也可以正常工作。

这两种方法各有优缺点，但浮动可能会出现问题，因为它们基本上无法被非浮动元素识别（以同样的方式position: absolute）。

顺便说一句，如果我是您，我会height从您的容器中取出，更改#navigation_holder为 a <nav>，甚至id可能从您的各个导航元素中取出 s（甚至可能是类！）。哎呀，您甚至可以完全取出内部s，并用who arediv替换它们（这将更具语义）。ullidisplay: inline

然后，您可以像这样引用它们：

.navigation_holder ul li {
    display: inline;
    padding-left: 40px; /* or whatever */
}

如果您只需要定位第一个或最后一个：

.navigation_holder ul li:first-of-type {
    // styles
}

.navigation_holder ul li:last-of-type {
    // styles
}

要从 中弹出默认样式ul：

.navigation_holder ul {
    list-style-type: none;
}
于 2013-11-16T09:59:47.207 回答
1

对你的问题的回答，对你的问题的一个问题......

你要买什么？

这里有 3 个例子：

3 列表样式

1如果你想要一个正常的左手水平内联列表，你会这样做：

HTML

左列表

<div id="navigation_holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

CSS

#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation_left ul li { display: inline; }

#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}

#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}

2如果您想将 li 元素居中。

HTML

列表中心

   <div id="navigation_center">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation_center ul li { display: inline; }

#navigation_center ul li a
{
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    text-decoration: none;
    padding: .2em 1em;
    color: #DDD;
    background-color: #0099CF;
    border-radius: 4px;
}

#navigation_center ul li a:hover
{
    color: #FFF;
    background-color: #00BEF9;
}

3如果您想以纯色背景居中您的 li 元素。

HTML

列表中心背景

   <div id="navigation_center_full">
    <ul class="full">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
    padding: .2em 1em;
    color: #DDD;
    background-color: #0099CF;
}

#navigation_center_full ul li { display: inline; }

#navigation_center_full ul li a
{
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    text-decoration: none;
    padding: .2em 1em;
    color: #DDD;
    background-color: #0099CF;
    border-radius: 4px;
}

#navigation_center_full ul li a:hover
{
    color: #FFF;
    background-color: #00BEF9;
}

很确定这应该对您有所帮助。

于 2013-11-16T10:51:02.183 回答
0

为什么你不使用<ul>和<li>标签？我认为更好。然后在 CSS 中你必须使用：

display: inline

一个例子：http ://www.w3schools.com/css/tryit.asp?filename=trycss_float5

于 2013-11-16T09:43:59.443 回答