我如何将 <span> 或 <div> 放在同一行

Question

如果我有 4 个 div(s) 或 4 个 span(s)，并且每个都有不同的颜色，并且每个宽度为 25%，并且将它们显示在同一行中使用 display:inline-block，问题是，如果我增加了其中一个的百分比，我怎么能让它们在同一行（而不向下推下一个元素）。那么假设，屏幕是这样的（红黑黄粉红）与高度无关，所以屏幕将充满 4 种颜色（在 X 轴上），但是如果我增加，比方说，黑色的宽度增加到 50%，其他 2 种颜色将被向下推，我不希望这样，我希望它们随 X 轴向右移动，所以如何我可以这样做吗？

抱歉拖了这么久，只是想让大家清楚。已经谢谢了。

Answer 1

您想使用 flex-box。

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

我在黑色列上添加了 flex-grow: 2，这使它变大了两倍。增加该值会增加它。

Answer 2

您可以使用 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>

Answer 3

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

您可能还想将其设置为隐藏溢出，具体取决于您希望它做什么。

因此您需要以下内容：

white-space: nowrap;
overflow: hidden;

另一个选项（在现实中似乎更明智）是确保您的元素总和为 100%。所以如果你增加到50%，同时减少其他的来补偿。

我如何将 <span> 或 <div> 放在同一行

How can i stick <span> or <div> in the same line

html

css

inline