我正在尝试使用列表项创建导航栏。我在它们周围放了一个边框,我试图弄清楚如何使列表项周围的边框大小相等。它们似乎总是与边框内的文本大小一致。对不起,如果它是一个愚蠢的问题我不熟悉网页设计。
#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>
答案 0 :(得分:0)
不确定这是否正是您所需要的,但请尝试使用此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
答案 1 :(得分:0)
如果您希望所有列表项都具有相同的宽度,则需要
1)在列表项目上设置宽度(对应于最宽项目)
2)为了能够设置宽度,您需要将列表项的显示值从inline
更改为inline-block
,因为宽度不适用于内联元素。
#nav {
height: 100px;
padding-top: 20px;
}
li {
display: inline-block;
border: 1px outset #c4c4cc;
font-family: Tahoma, Geneva, sans-serif bold;
margin-left: 29px;
font-weight: bold;
padding: 12px;
width: 100px;
text-align: center;
}
<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>
答案 2 :(得分:-2)
您只需将<li>
标记的高度设置为符合<li>
标记中文本最大尺寸的值即可。然后就行了。