Question

如果我有4个div或4个span，并且每个都有不同的颜色，每个颜色的宽度为25％，并使用display显示在同一行：inline-block问题是，如果我增加了其中一个元素的百分比，我怎么能让它们在同一行（不推下一个元素）。所以，让我们说，屏幕是这样的（红黑黄粉红色）对于高度无关紧要，所以屏幕将充满4种颜色（在X轴上），但是，如果我增加了，那就说，黑色的宽度高达50％，其他两种颜色将被推下来，我不想要那个，我希望他们向右移动X轴，我怎么能这样做？

很抱歉这么做，只是想让所有人都清楚。谢谢你。

Answer 1

简单的答案是将父级设置为不允许自动换行。内联块元素被视为关于流的文本内容，因此这样做可以防止它们包裹到下一行，即使它们太长而不适合。

您可能还希望将其设置为隐藏溢出，具体取决于您希望它执行的操作。

所以你需要以下内容：

white-space: nowrap;
overflow: hidden;

另一个选项（实际上看起来更合理）是确保您的元素总是加起来100％。因此，如果你增加到50％，同时减少其他人来补偿。

Answer 2

您想使用flex-box。

这是你的想法吗？ https://codepen.io/anon/pen/YrzQLV

在黑色栏目中，我添加了flex-grow: 2，这使它增加了两倍。递增该值会增加它。

Answer 3

你可以使用inline-block和float left来获得一行中的所有四个div或span。对于你的内容，该行必须等于100％，即使使用浮点数也不会下降到新行。如果您试图让所有内容动态适应，Flexbox会有所帮助。它仍然只使用100％的行。并非所有浏览器都支持flexbox。

.outter-div {
     width:100%;
     display:block;
     position:relative;
     height:100%;
     margin:0 auto;
     }
    
    
    .one,.two,.three,.four {width:25%;
     display:inline-block;
     float:left;position:relative;
     height:100%;text-align:center;}
     .one {background-color:blue;}
     .two {background-color:green;}
     .three {background-color:red;}
     .four {background-color:yellow;}

<div class="outter-div">
      <div class="one"><p>Content 01</p></div>
      <div class="two"><p>Content 02</p></div>
      <div class="three"><p>Content 03</p></div>
      <div class="four"><p>Content 04</p></div>
    </div>

我如何在同一行中粘贴<span>或<div>

3 个答案: