如何将 <span> 或 <div> 粘贴在同一行答案

【问题标题】：How can i stick <span> or <div> in the same line如何将 <span> 或 <div> 粘贴在同一行
【发布时间】：2017-09-13 04:44:27
【问题描述】：

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

抱歉，拖了这么久，只是想澄清一下。已经谢谢你了。

【问题讨论】：

我在 1 行后停止阅读 - 请阅读有关如何提问的帮助部分。
如果总宽度百分比超过 100%，那么它们将不适合同一行。
你试过什么？有代码吗？

标签： html css inline

【解决方案1】：

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

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

所以你需要以下内容：

white-space: nowrap;
overflow: hidden;

另一个选项（在现实中似乎更明智）是确保您的元素总加起来达到 100%。因此，如果您增加到 50%，请同时减少其他人以进行补偿。

【讨论】：

【解决方案2】：

你想使用 flex-box。

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

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

【讨论】：

是的，但是你写它的方式有点高级！我想我可以让 X 轴不受限制，或者类似的东西，仍然是一个初学者来考虑如何做到这一点，哈哈。无论如何，感谢您的宝贵时间。
您可以根据需要添加更多内容。大多数 CSS 仅用于装饰目的，但您当然可以添加更多 div。观察codepen.io/anon/pen/YrzQLV 使用:nth-child 正是您定位特定div 的方式。 Flexbox 确实是解决这个问题的正确方法。 caniuse.com/#search=flexbox 现代浏览器都支持它。

【解决方案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>

【讨论】：