1

我正在尝试使用列表项制作导航栏。我在它们周围设置了一个边框,我试图弄清楚如何使列表项周围的边框大小相等。它们似乎总是与边框内的文本大小一致。对不起,如果这是一个愚蠢的问题,我是网页设计的新手。

#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>

4

3 回答 3

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

于 2013-04-12T00:49:00.813 回答
0

如果您希望所有列表项的宽度相同,则需要

1)在您的列表项上设置一个宽度(对应于,比如说,最宽的项目)

2)为了能够设置宽度,您需要将列表项的显示值从更改为inlineinline-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>

于 2014-12-15T09:17:26.617 回答
-2

您只需将标签的高度设置为<li>适合标签中文本的最大尺寸的值<li>。然后它工作。

于 2014-12-15T08:15:21.613 回答