甚至在固定宽度内的导航条上填充

我在我正在处理的网站上的导航栏中遇到了一些问题。我试图让每个链接都具有相同的填充，并使导航栏占据固定的宽度。到目前为止，我一直无法弄清楚如何在所有链接上填充填充。我希望能够添加和删除链接，并保持填充即使在相同的宽度。我的代码如下。我只是使用了你看到的链接，不断地搞乱数字，直到它看起来正确，但我希望能够改变链接，而不必再次猜测和检查填充。任何帮助都会很棒。我也一直在寻找一个解决方案几天，但找不到一个，但如果我错过了一些东西，这是一个重复的问题，我很抱歉。谢谢。甚至在固定宽度内的导航条上填充

HTML：

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; 
}

来源

2015-02-11 727021

您可以使用显示器table，table-row和table-cell，这是我能想到的最好的解决方案。现场演示 - http://jsfiddle.net/ck1hbtzq/

.navbar { 
    display: table; 
    width: 1000px; 
} 

.navbar ul { 
    display: table-row; 
} 

.navbar li { 
    display: table-cell; 
}

来源

2015-02-11 02:30:21 Stickers

甚至在固定宽度内的导航条上填充

回答

相关问题