Question

我正在尝试在我的网站顶部制作导航栏。但物品不能水平对齐。我用display：inline。这会让事情并排对齐吗？嗯...一旦我将显示设置为内联，项目的宽度似乎设置为100％，因此不允许项目并排。当我将显示设置为内联块时，高度似乎是三倍，但是项目是并排设置的。虽然，我不希望它高于它，因为那样的外观不是我想要的。

如何正确对齐项目！？如果你这样做，请帮助并谢谢你。

html代码

#Bars{
    height: 30px;
    width: 100%;
    background-color: #000099;
    border-radius: 10px;
}

#Bars ul li p{
    color: black;
    font-size: 20px;
}

#Bars ul li{
    list-style: none;
    display: inline;
}

css代码

{
    xtype: 'list',
    store: 'contactStore',
    flex: 1,
    itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',

    infinite: true /* Setting this to true hides the list */
}

Answer 1

将以下css添加到您的样式表中，并将inline-block设置为li，在您的情况下预定义为margin且padding正在应用

* {
    margin:0;
    padding:0;
}

#Bars ul li{
    list-style: none;
    display: inline-block;

}

Answer 2

使用Fiddle

HTML：

<div id="nav">
<ul>
  <li class="current_page_item">[LINK]</li>
  <li class="page_item">[LINK]</li>
  <li class="page_item">[LINK]</li>
  <li class="page_item">[LINK]</li>
  <li class="page_item">[LINK]</li>
  <li class="page_item">[LINK]</li>
</ul>
</div>

CSS：

#nav ul {
 list-style: none;
 height:16px;
 background: #ccc
}
#nav ul li {
 position: relative;
 display: inline-block;
}
#nav {
 position: relative;
 text-align: center;
}

Answer 3

使用可以使用display：inline-block;并需要调整保证金。 js小提琴链接：

{{1}}

-HTML-项目不会水平对齐

3 个答案: