同一行上的内联元素:我该怎么办

Question

我有这段代码。

<div id="header">
    <p>Home</p>
    <p>Home</p>
    <p>Home</p>
    <p>Home</p>
</div>

如何在同一行的中心内联显示此元素？我试过了

#header {
    display:inline;
    margin-left:auto;
    margin-right:auto;
}

但不要工作

Answer 1

试试这个，如果你不想更改你的标记。

#header{
    text-align:center;
}
#header p{
    display:inline; 
}

Js 小提琴演示

Answer 2

无需将 p 的 HTML 标记更改为span元素

_{一种方法是使用display:inline进行p：演示}

#header{
  text-align:center;
}
#header p{
  display:inline;
}

_{另一个，使用display:table：演示}

#header{
  display:table;
  margin:0 auto;
}
#header p{
  display:table-cell;
}

Answer 3

inline显示应应用于要内联显示的元素（即<p>）。另外，在我看来，更好的选择是使用 inline-block .这将保留<p>的block地位，但仍然inline。

#header {
    text-align: center; /* Don't forget, you're centering inline elements (i.e. text) */
}
#header p {
    display: inline-block;
}

Answer 4

你可以在这里用

span元素的例子来做到这一点：

#header{
    width:200px;
    margin:0 auto;        
}

<div id="header">   
    <span>Home</span>
    <span>Home</span>
    <span>Home</span>
    <span>Home</span>    
</div>

Answer 5

正如其他人提到的Display:inline是一个很好的解决方案。

您也可以尝试float:left相同的方法。

工作演示

#header p{
    float:left;
    padding:10px;
}