css - 如何让一系列 <p> 元素水平显示？

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>

这是它的一个 fiddle :https://jsfiddle.net/nqey10p0/

使用内联 block 的主要原因是让内容表现得像一行文本，但能够像图像一样强制宽度和高度。