我的菜单栏有两个问题。我想要实现的是将标题(包括 Logo 图片)上的链接居中，并且标题的高度与菜单的高度完全相同。当我添加链接时，它会在顶部和底部创建一个边距(因此标题会扩展)，我不知道为什么。边距大小取决于字体大小，如果我想删除它，我必须添加一个 -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;
}
提前致谢!
最佳答案
标题正在扩展，因为对于 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
给李
float:left
检查 fiddle http://jsfiddle.net/gJFy8/1/
关于html - 使用 CSS 居中菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21233912/