Question

我正在尝试开发一个水平网页，其高度固定，宽度可变。

为了获得它，我需要一行浮动<div>来扩展<body>宽度。

|------------- body --------------|   /* variable width */
  |-div-| |-div-| |-div-| |-div-|     /*  fixed width   */

以下代码似乎不起作用：

body{
  height: 40px;
}

div{
    width: 2000px;
    height: 20px;
    background: red;
    margin: 10px;
    float: left;
 }

如果不使用javascript就可以这样做吗？

Answer 1

块元素扩展到其父元素宽度的整个宽度。为了让他们尊重他们的孩子，你可以宣布：

display: inline-block;

或

position:absolute;

在你的身体元素上。

编辑：在您澄清问题后 - 只需将white-space声明添加到您的身体：

white-space:nowrap;

<强> Demo

Answer 2

试试这个：

body{
height: 40px;
display: inline-block;
}