Fatal编程技术网
  • html/
  • CSS和HTML导航栏错误

CSS和HTML导航栏错误

html css button navigation

CSS和HTML导航栏错误,html,css,button,navigation,stacked,Html,Css,Button,Navigation,Stacked,我正在尝试用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 { posit

我正在尝试用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>

正文
{
背景色：#666；
}
.font\u标题
{
字体系列：“SegoeUI”；
字体大小：粗体；
字体大小：60px；
文本对齐：居中；
}
#头衔
{
宽度：800px；
}
#容器
{
位置：相对位置；
保证金：自动；
宽度：800px；
高度：995px；
背景色：#中交；
}
#导航U支架
{
位置：相对位置；
保证金：自动；
宽度：800px；
}
.导航按钮
{
字体系列：“SegoeUI”；
文本对齐：居中；
字号：26px；
宽度：200px；
高度：40px；
背景色：#09C；
}
.导航按钮：悬停
{
背景色：#09F；
}
我们的网站
家
关于
服务
联系
问题是——我所有的导航按钮都是叠在一起的，而不是一排。我做错了什么

为什么不使用
    和
  • 标签？我认为这样更好。然后在CSS中，您必须使用：
    

    display: inline

    

    例如：
    为什么不使用
      和
    • 标记？我认为这样更好。然后在CSS中，您必须使用：
      

      display: inline

      

      例如：
      问题在于
      div
      s是块元素，因此它们自然地将自身置于彼此之上。您可以使用多种方法使它们正常工作。在大多数情况下，我更喜欢将
      显示：内联块
      应用于
      。导航按钮
      类。但是，在这种情况下，
      float:left
      也可以工作
      
这两种方法各有优缺点，但浮动可能会出现问题，因为它们基本上无法被非浮动元素识别（与
      position:absolute
      does的方式相同）
      
另一方面，如果我是你，我会从你的容器中拉出
      高度
      ，将
      #navigation_holder
      更改为
      ，甚至可能从你的单个导航元素中拉出
      id
      （甚至可能是类！）。见鬼，你甚至可以完全取出内部的
      div
      s，用
      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;
}

      

      问题是
      div
      s是块元素，因此它们自然地将自己置于彼此之上。您可以使用多种方法使它们正常工作。在大多数情况下，我更喜欢将
      显示：内联块
      应用于
      。导航按钮
      类。但是，在这种情况下，
      float:left
      也可以工作
      
这两种方法各有优缺点，但浮动可能会出现问题，因为它们基本上无法被非浮动元素识别（与
      position:absolute
      does的方式相同）
      
另一方面，如果我是你，我会从你的容器中拉出
      高度
      ，将
      #navigation_holder
      更改为
      ，甚至可能从你的单个导航元素中拉出
      id
      （甚至可能是类！）。见鬼，你甚至可以完全取出内部的
      div
      s，用
      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;
}

      

      不要将它们设为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>

      

      

      
身体
{
背景色：#666；
}
.font\u标题
{
字体系列：“SegoeUI”；
字体大小：粗体；
字体大小：60px；
文本对齐：居中；
}
#头衔
{
宽度：800px；
}
#容器
{
位置：相对位置；
保证金：自动；
宽度：800px；
高度：995px；
背景色：#中交；
}
#导航U支架
{
位置：相对位置；
保证金：自动；
宽度：800px；
}
.导航按钮
{
字体系列：“SegoeUI”；
文本对齐：居中；
字号：26px；
宽度：200px；
高度：40px；
背景色：#09C；
}
.导航按钮：悬停
{
背景色：#09F；
}
保险商实验室
{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
锂
{
浮动：左；
}
a:链接，a:已访问
{
显示：块；
宽度：200px；
字体系列：“SegoeUI”；
文本对齐：居中；
字号：26px；
宽度：200px；
高度：40px；
背景色：#09C；
}
a:悬停，a:活动
{
背景色：#09F；
}
我们的网站

        

      • 

      • 

      • 

      • 

      

      不要将它们设为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>

      

      

      
身体
{
背景色：#666；
}
.font\u标题
{
字体系列：“SegoeUI”；
字体大小：粗体；
字体大小：60px；
文本对齐：居中；
}
#头衔
{
宽度：800px；
}
#容器
{
位置：相对位置；
保证金：自动；
宽度：800px；
高度：995px；
背景色：#中交；
}
#导航U支架
{
位置：相对位置；
保证金：自动；
宽度：800px；
}
.导航按钮
{
字体系列：“SegoeUI”；
文本对齐：居中；
字号：26px；
宽度：200px；
高度：40px；
背景色：#09C；
}
.导航按钮：悬停
{
背景色：#09F；
}
保险商实验室
{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
锂
{
浮动：左；
}
a:链接，a:已访问
{
显示：块；
宽度：200px；
字体系列：“SegoeUI”；
文本对齐：居中；
字号：26px；
宽度：200px；
高度：40px；
背景色：#09C；
}
a:悬停，a:活动
{
背景色：#09F；
}
我们的网站

        

      • 

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