0

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

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

这是jsfiddle：

http://jsfiddle.net/PkvZ7/

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>

我感谢任何关于此事的帮助/解释。

谢谢。

4

1 回答 1

2

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

该<center>标签已被弃用，因此对宽度为 960 像素的外部“容器”包装器使用相同的技术；。

ul {
    width:500px;
    list-style-type: none;
    margin-left:auto;
    margin-right:auto;
    padding:0;   
}

一般来说，当使用基于列表的菜单时，float:left在你的 LI 上使用display:block，在 A-tag 上使用，并将所有其他样式放在 A-tag 上，而不是列表本身。

请参阅我的教程：我喜欢列表。

于 2013-01-15T22:29:34.837 回答