我在使用网站时遇到导航栏问题。我试图使每个链接具有相同的填充,并让导航栏占用固定的宽度。到目前为止,我一直无法弄清楚如何在所有链接上获得均匀的填充。我也希望能够添加和删除链接,并在相同的宽度内保持填充。我的代码如下。我只是使用了您看到的链接并不断修改数字直到它看起来正确,但我希望能够更改链接而不必再次猜测和检查填充。任何帮助都会很棒。几天来我一直在寻找解决方案,但找不到,但如果我遗漏了什么,这是一个重复的问题,我深表歉意。谢谢。
HTML:
<div class="navbar">
<ul>
<li class="navbar-active"><a href="home.php">Home</a></li>
<li ><a href="about.php">About</a></li>
<li ><a href="registration.php">Registration</a></li>
<li ><a href="attendees.php">Attendees</a></li>
<li ><a href="schedule.php">Schedule</a></li>
<li ><a href="faq.php">FAQ</a></li>
<li ><a href="speakers.php">Speakers</a></li>
<li ><a href="photos.php">Photos</a></li>
<li ><a href="contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar -->
CSS:
/**
* Navbar
*/
div.navbar{
width:1000px;
background-color: #E15532;
text-transform: uppercase;
height: 30px;
line-height: 30px;
}
div.navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.navbar ul li{
float: left;
}
div.navbar ul li a{
display: inline-block;
margin: 0;
padding: 0;
font-weight: bold;
text-decoration: none;
color: #F7F6E2;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #AF4128;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #AF4128;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #AF4128;
padding-left: 16.67188px;
padding-right: 16.67187px;
text-align: center;
}
div.navbar ul li a:hover{
background-color: #AF4128;
}
最佳答案
你可以使用显示table
、table-row
和table-cell
,这是我能想到的最好的解决方案。现场演示 - http://jsfiddle.net/ck1hbtzq/
.navbar {
display: table;
width: 1000px;
}
.navbar ul {
display: table-row;
}
.navbar li {
display: table-cell;
}
关于jquery - 甚至在固定宽度内填充导航栏链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28445209/