如何在另一个div中在一行中生成一行div?

I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?

我有一个div“container”，比如400px宽度，里面有一个左浮动div——“box”100px宽度。有6个“box”div因此它们的汇总宽度大于400px，这使得这一行div被打包，我得到了两行，每行包含4和2个元素。我怎么能让这6个divs排成一行，一行而不是两行?

4 个解决方案

#1

You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).

您只需在父元素上使用白空间:nowrap，并在子元素上使用display: inline-block。现场演示(点击)。

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

css:

.container {
  width: 400px;
  background: black;
  white-space: nowrap;
  overflow: scroll;
}

.container > div {
  height: 50px;
  width: 100px;
  background: #555;
  display: inline-block;
  margin: 10px;
}

#2

hope it will help you

希望它能对你有所帮助

 display:inline-block;

#3

Assuming you continue using float: left;... If your container has a set width of 400px, then your total sum of children divs can't surprass 400px wide either. This includes any padding, margin, or border space as well.

假设您继续使用float: left;…如果容器的宽度设置为400px，那么子元素的总和也不能超过400px宽。这包括任何填充、空白或边框空间。

To answer your question simply, there are several ways...

简单地回答你的问题，有几种方法……

Make the container 600px wide instead of 400px...
让容器宽度为600px而不是400px…
Make the child elements 66px wide instead of 100px...
使子元素宽度为66px，而不是100px…

A better option is to use percentages...

一个更好的选择是使用百分比……

Make the child elements 16.666667% wide.
使子元素的宽度为16.666667%。

#4

You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS

您需要为容器的子容器提供display: inline-block，并提供空白:nowrap以使它们水平流动。这是CSS

#Container {
    width: 400px;
    border: 1px solid black;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.inside {
    width: 100px;
    height: 300px;
    border: 1px solid black;
    display: inline-block;
}

and HTML

和HTML

<div id="Container">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
 </div>

Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/

这是您的问题的小提琴http://jsfiddle.net/sgaurav/vZLWQ/

#1