同一行的内联元素：我该怎么办？

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 Fiddle Demo

Answer 2

不更改p到span元素的HTML标记

_{一种方法是将display:inline用于p：demo}

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

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

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

Answer 3

您可以使用span元素示例执行此操作：FIDDLE

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

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

Answer 4

inline显示应该应用于您想要内联显示的元素（即<p>）。此外，我认为更好的选择是使用inline-block。哪个会保留block的{​​{1}}状态，但仍然会<p>。

inline

Answer 5

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

您也可以尝试使用float:left。

Working Demo

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