Question

我有一个工作正常的导航栏，但我想为每个链接添加填充和高度。每当我这样做时，它会使除了第一个之外的所有链接都高于它们应该的高度。由于某种原因，这在Fiddle中不起作用，所以这里是代码：（CSS）

body {
overflow-x:hidden;
font:13px arial;
background-color:#171120;
margin:0;
}
nav {
height:100px;
width:100%;
padding:10px;
padding-top:30px;
background-image:url('nav_bg.png');
border-bottom: 3px solid #302342;
}
nav #header {
color:#FFFFFF;
font:bold 56px arial;
float:left;
}
nav ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
margin-top:20px;
margin-right:180px;
overflow:hidden;
}
nav ul li {
float:left;
}
nav ul li a:link,a:visited {
display:block;
width:180px;
##################################If you add height or border or padding, the links become taller!
background-color:#333333;
text-align:center;
font:bold 26px arial;
color:#ffffff;
text-decoration:none;
}

（HTML）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>

<title>Testing...</title>
</head>

<body>
<nav>
<div id="header">Testing...</div>
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</nav>
</body>
</html>

为什么我不能在链接上添加高度，填充或边框而不会突然变得更高？

Answer 1

这是众所周知且烦人的问题。

这可以使用“box-sizing”来解决

请参阅this link了解教程

这个解释非常相关：

“box-sizing CSS3属性可以做到这一点。边框值（与内容框默认值相对）使最终渲染框成为声明的宽度，框内的任何边框和填充都会被切割。现在可以安全地声明我们的textarea是100％宽度，包括基于像素的填充和边框，并完美地完成布局。“

无法更改CSS导航栏高度

1 个答案: