-HTML- 项目不会水平对齐

Question

我想在我的网站顶部制作一个导航栏。但是这些项目不会正确地水平对齐。我使用了显示：内联。那应该使事情并排对齐吗？好吧...一旦我将显示设置为内联，项目的宽度似乎设置为 100%，因此不允许项目并排显示。当我将显示设置为 inline-block 时，高度似乎增加了三倍，但项目是并排设置的。虽然，我不希望它比它更高，因为那样的外观不是我想要的。

如何使项目正确对齐！？如果你愿意，请帮忙，谢谢。

html代码

<div id="Bars">
        <ul>
            <li><p style="width: 50px">Home</p></li>
            <li><p style="width: 73px">Software</p></li>
            <li><p style="width: 62px">Gallery</p></li>
        </ul>
    </div>

css代码

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

Answer 1

将下面 css 添加到您的样式 sheet 并将 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 fiddle link :

`https://jsfiddle.net/2pr2pq78/`

-HTML- 项目不会水平对齐

-HTML- Items wont align horizontally

html

inline