Question

我以为我可以使用float: left，但这不起作用。我尝试将包含div设置为width:auto和width:100%，但这似乎也没有效果。

// ... snip

#mi_control{
  position:  absolute;
  top:  220px;
  left: -20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.menu_bottom{
  position: relative;
  margin-left: 18px;
  float: left;
}
.menu_bottom:hover{
  cursor: pointer
}

</style>

<div id='mi_holder' class='proof_of_existance'>
    <div id='mi_box'>

    // .. snip

    <div id='mi_control' class='radius_all'>
      <p id='mi_cover_l' class='menu_bottom small_dark'>Foo &copy; </p>
      <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
      <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
      <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
      <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
    </div>
</div>

Answer 1

试试这个：

<p style="display:inline-block">Some text!</p>
<p style="display:inline-block">More text!</p>

话虽这么说，段落标签已经过时，无法使用界面。它直接暗示您必须在CSS中覆盖的某些间距。您应该为实际的内联文本段落保留段落标记。使用div或span标签进行界面布局。例如：

.menuitem { display: inline-block; min-width: 72px; background-color: #AAAAFF; }

<div class="menuitem">Some text!</div>
<div class="menuitem">More text!</div>

这是一个工作的小提琴：https://jsfiddle.net/nqey10p0/

使用内联块的主要原因是使内容的行为类似于文本行，但能够像图像一样强制宽度和高度。

Answer 2

只需在display: inline-block元素上设置p。

http://jsfiddle.net/q5ar9jLb/1/

Answer 3

重新评论我的评论：默认情况下，<p>元素是块级元素，因此将占用包含父级宽度的100％。如果您想要水平排列它们，您必须强制使用flexbox布局（并禁用flex-wrap，但如果浏览器支持flexbox规范，则应默认禁用），或浮动元素并声明宽度减小（例如，父母宽度的一部分）。

以下是使用推荐的flexbox布局的代码示例。要更改项目的排列（应如何排列单个元素），您可以调整justify-content值。我已经删除了#mi_control元素的多余样式，只是为了更简化的示例 - 定位的使用不应该影响如何解释flexbox。

#mi_control {
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
}
.menu_bottom {
  position: relative;
  margin-left: 18px;
}
.menu_bottom:hover {
  cursor: pointer
}

<div id='mi_holder' class='proof_of_existance'>
  <div id='mi_control' class='radius_all'>
    <p id='mi_cover_l' class='menu_bottom small_dark'>Arcmarks &copy;</p>
    <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
    <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
    <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
    <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
  </div>
</div>

一些额外提示：

您可能希望查看使用（非）有序列表，因为您的内容似乎是在语义上属于列表的内容。
详细了解CSS flexbox

如何使一系列<p>元素水平显示？

3 个答案: