Question

我正在尝试使用HTML＆amp; 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>

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

The problem with the page

Answer 1

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

enter image description here

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

Answer 2

问题是div是块元素，因此它们自然地将它们置于彼此之上。您可以使用多种方法来使它们表现出来。在大多数情况下，我希望将display: inline-block应用于.navigation_button课程。但是，在这种情况下，float: left也可以正常工作。

这两种方法有其优点和缺点，但浮点数可能会成为问题，因为它们基本上变得无法识别非浮动元素（与position: absolute一样）。

顺便说一句，如果我是你，我会从您的容器中取出height，将#navigation_holder更改为<nav>，甚至可以拉id您的个人导航元素（可能甚至是类！）。哎呀，你甚至可以完全取出内部的div，并用ul li display: 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; }：

中弹出默认样式

{{1}}

Answer 3

回答您的问题，并回答您的问题...

您在寻找什么？

以下是3个例子：

3 List Styles

1 如果你想要一个普通的左手水平内联列表，你可以这样做：

<强> HTML

Left List

<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

List Center

   <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

List Center Background

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

很确定这可以帮到你。

Answer 4

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

display: inline

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

CSS和HTML导航栏错误

4 个答案: