Question

所以，基本上我上次进行任何网页开发时，只有HTML，而且我没有任何基本的理解。所以现在，我正在追赶并尝试学习CSS。我的问题是水平导航栏，它没有完全居中。我已经尝试调整宽度，边框和边距，但我遗漏了一些东西。

使用我当前的布局，左侧的空白区域比右侧更多，我被卡住了。

这是jsfiddle：

CSS：

<!-- JASCO NAVBAR -->
ul
{
width:100%;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:none;
overflow:hidden;
}

li
{
align:center;
width:20%;
margin:0;
padding:0;
display:inline-block;
list-style-type: none;
}
a:link,a:visited
{
display:block;
width:100%;
font-weight:bold;
font-size:20px;
color:#FFFFFF;
background-color:#FF6103;
text-align:center;
padding:5px;
text-decoration:none;
font-variant:small-caps;
}
a:hover,a:active
{
background-color:#000000;
color:#FF6103;
}

#container {
  width:100%
}

<!-- TOP CSS-->
.top {
position:absolute;
width:80%;
height:10%;
margin-left:auto;
margin-top:20px;
margin-right:auto;
color:#000000;
padding:0;
}

<!-- CONTENT CSS-->
.content {
position:absolute;
width 100%;
margin-left:10px;
margin-right:10px;
padding:3px;
color:#dddddd;
}

#img
{
}

<!-- TOP IMAGE CSS-->
img.center {
display:block;
margin-left:auto;
margin-right:auto;
}

HTML：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jascostyle.css">
<title>Single"Frame" Test</title>
</head>

<body>
<div id="container">
  <center>
  <div class="top">
  <img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/>
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  </ul>
  </div>


  <div  class="content">
  <h1>This is under construction!</h1>
  </div>
    </div>
  </body>
</html>

感谢您对此事的任何帮助/解释。

感谢。

Answer 1

您需要固定宽度+ margin-left:auto和margin-right:auto。你不应该对你的内容使用绝对定位 - 让它自然流动。

{@ 1}}标记已被弃用，因此对于宽度为960px的外部“容器”包装使用相同的技术;。

<center>

通常，在使用基于列表的菜单时，在LI上使用ul { width:500px; list-style-type: none; margin-left:auto; margin-right:auto; padding:0; }，在A-tag上使用float:left并将所有其他样式放在A-tag上，而不是列表本身。< / p>

请参阅我的教程：I Love Lists。

CSS问题中心导航栏

1 个答案: