我正在尝试制作一个带有列表项的导航栏。我在它们周围放了一个边框,我想弄清楚如何使列表项周围的边框大小相等。它们似乎总是与边框内的文本大小一致。对不起,如果这是一个愚蠢的问题,我是网页设计的新手。
#nav {
background-color: #000;
height: 100px;
padding-top: 20px;
}
li {
display: inline;
border: 1px outset #c4c4cc;
background-color: #c4c4cc;
font-family: Tahoma, Geneva, sans-serif bold;
margin-left: 29px;
font-weight: bold;
padding: 12px;
}
<div id="nav">
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Castings</li>
<li>Machining</li>
<li>Products</li>
<li>Home</li>
</ul>
</div>
最佳答案
不确定这是否正是您要找的,但试试这个 CSS:
#nav {
background-color: #000;
overflow: hidden;
}
li {
float: left;
background-color:#c4c4cc;
font-family:Tahoma, Geneva, sans-serif bold;
margin: 29px;
font-weight:bold;
padding:12px;
}
ul {
margin: 0px;
}
这是一个带有示例的 js bin:http://jsbin.com/onakom/2/edit
关于css - 大小相等的列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15961122/