Question

我的菜单栏有两个问题。我想要实现的是将标题中的链接居中（包括徽标图片），并且标题的高度与菜单完全相同。当我添加链接时，它会在顶部和底部创建一个边距（因此标题会扩展），我不知道为什么。边距大小取决于字体大小，如果我想删除它，我必须添加-something px边距，并且必须逐个像素地尝试数字应该是什么。我很确定这是一个更简单的解决方案...我的另一个问题是我不能将整个菜单栏置于标题中心，除非我指定一个特定的宽度。显然我不知道我的菜单栏有多宽（即使我以某种方式测量它，如果我稍后更改链接怎么办？）我对HTML和CSS相当新，所以我可能犯了一堆错误，我只是不断更改代码，直到我得到我想要的东西，但因为我想要更好地学习它，我的目标是比随机编码更多的理解，所以随时纠正任何事情。这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet'   type='text/css'>
</head>

<body>

<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li id="right"><a href="#">English</a></li>
</ul>
</div>
</div>


</body>
</html>

CSS：

@charset "utf-8";

body {
background-color: #efe8df;
}

#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}

#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}

#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}

#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}

#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}

#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}

#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}

#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}

提前致谢！

Answer 1

尝试在您的CSS中添加此内容，根据需要将宽度更改为您想要的任何内容

#menu {

width: 900px;

Answer 2

为#menu div添加宽度

menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}

Answer 3

标题正在扩展，因为对于ul和li，所有浏览器都有边距和填充标准。您应该使用reset.css和normalize.css来删除某些常见元素的默认css属性。

所以，如果你只是想要列表使用

ul,li{margin:0; padding:0}或你想要多少。

要居中对齐，您可以提供以下css属性

到标题

display: table

到菜单

display : table-cell;
text-align:center

到ul

display:inline-block

到li

 float:left

检查小提琴 http://jsfiddle.net/gJFy8/1/

带CSS的居中菜单栏

3 个答案: