Question

以下是一个小例子：http://www.cssdesk.com/QXmaG

HTML：

<div id="blockHolder">
  <div class="inlineblock"></div>
  <div class="inlineblock"></div>
  <div class="inlineblock"></div>
  <div class="inlineblock"></div>
</div>

CSS：

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

.inlineblock{
  width:400px;
  height:200px;
  display:inline-block;
  background:red;
  white-space: nowrap;
}

#blockHolder{
  width:auto;
  height:100%;
}

我希望inline-block项在此示例中的父容器#blockHolder中保持排列（水平）。

为什么white-space:nowrap不起作用，我怎样才能达到预期效果？

谢谢！

Answer 1

将whitespace: nowrap添加到#blockHolder：http://jsfiddle.net/3LQJG/。

#blockHolder {
    white-space: nowrap;
}

Answer 2

white-space：nowrap指定段落中的文本永远不会换行，对div不起作用。您需要为#blockHolder添加宽度。

Answer 3

使用display:table-cell;

.inlineblock{
  width:400px;
  height:200px;
  display:table-cell;
  background:red;

}

请参阅：http://www.cssdesk.com/maCKQ

Answer 4

在body中，添加：

width: 100%;

<强> CSS：

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
  width: 100%;
}

Demo

为什么我的内联块元素会保持包装？

4 个答案: