Question

考虑以下片段：

<html>
    <head>
        <style type="text/css">
        #container {
            width: 400px;
            height: 600px;
            background-color: lightgrey;
        }

        .item {
            width: 50px;
            overflow: hidden;
            white-space: nowrap;
            float: left;
            border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="item">ITEM 1</div>
            <div class="item">ITEM 2</div>
            <div class="item">ITEM 3</div>
            <div class="item">ITEM 4</div>
            <div class="item">ITEM 5</div>
            <div class="item">ITEM 6</div>
            <div class="item">ITEM 7</div>
            <div class="item">ITEM 8</div>
            <div class="item">ITEM 9</div>
            <div class="item">ITEM 10</div>
            <div class="item">ITEM 11</div>
            <div class="item">ITEM 12</div>
            <div class="item">ITEM 13</div>
            <div class="item">ITEM 14</div>
            <div class="item">ITEM 15</div>
            <div class="item">ITEM 16</div>
        </div>
    </body>
</html>

它给了我以下结果：

enter image description here

我想要的是让所有内盒保持在同一行然后宽度为400px的容器，以防内盒没有完全填满，像这样：

enter image description here

如果有人在此暗示我，我真的很感激。提前谢谢！

Answer 1

您可以尝试使用display：table（-row）（ - cell）而不是浮动，请参阅我对此问题的回答：Force <DIV> to stay in one line with scroll bar

然而，重要的是，这在IE7中不起作用......

Answer 2

您可以对容器中不想包装的元素执行white-space: nowrap。

在这里演示http://www.w3schools.com/cssref/pr_text_white-space.asp

CSS - 使浮箱保持在“同一条线”

2 个答案: