显示:内联块不产生水平结果

Question

这个小提琴显示了我的问题。

输出仅包括 2 个黄色框，但可能还有更多。我希望这些框水平显示，而不是像现在显示的那样垂直显示。我试图利用display: inline-block来实现我的目标，但无济于事。如何让框水平显示？

Answer 1

我能够通过向.sticky添加float: left;并删除display: inline-block来使元素居中：

.sticky {
   float: left;
}

Answer 2

对带有

class="element"的div使用display:inline-block，并删除放在第二个<div class="element"之前的<div class="reminders">

Answer 3

如果您不想删除元素或使它们浮动，请向父级添加display: inline-block：.reminders, .element {display: inline-block}

Answer 4

将

float: left添加到.sticky（以及一些左边距或/和右边距）：

https://jsfiddle.net/Lcrysuzy/