Question

显然，我可以设置width属性，但div包含确定其宽度的p元素。

我可以在计算值下从Web检查器中提取此值，然后手动输入，但我想要一个更优雅的解决方案。

#mi_control {
  display: inline-block;
  position: relative;
  width: auto;
}
.menu_bottom {
    float: left;
}

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

在这种情况下，计算出的宽度为341px，如Chrome Inspector所示。

Answer 1

为了防止div中的文本大小进一步折叠，文本从包装中删除，请在div上使用white-space: nowrap CSS规则。

现场演示：

＆＃13;

#mi_control{
  display: inline-block;
  position:  relative;
  width: auto;
  white-space: nowrap;
}

＆＃13;

<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 (more random text added here to increase div width more random text added here to increase div width more random text added here to increase div width)</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>

＆＃13;

＆＃13; JSFiddle版本：https://jsfiddle.net/hcfbvcxk/1/

当视口宽度变小时，是否可以让div不崩溃？

1 个答案: