Css Can'；不要让水平的柱子工作

因此，我试图跨越4个水平列的列表。我将每个

div

设置为

25%

，但仍然没有运气。这就是我要做的

<div class="listed">
           <div class="section-one" style="display: inline-block;width: 25%;">
                                        <h3>All Rooms</h3>
                                        <ul>
                                            <li>Dust all furniture</li>
                                            <li>Polish all furniture</li>
                                            <li>Dust all misc. items</li>
                                            <li>Dust all windowsills</li>
                                            <li>Dust ceiling fans</li>
                                            <li>Remove trash</li>
                                            <li>Vacuum carpets</li>
                                            <li>Sweep floors</li>
                                            <li>Mop floors</li>
                                            <li>Dust and sanitize light switches</li>
                                        </ul>
                                    </div>
                                    <div class="section-two" style="display: inline-block;width: 25%;">
                                        <h3>Kitchen</h3>
                                        <ul>
                                            <li>Scrub &amp; sanitize sinks</li>
                                            <li>Scrub &amp; sanitize counters</li>
                                            <li>Place dishes in the dishwasher (if empty)</li>
                                            <li>Clean surfaces</li>
                                            <li>Clean outside of appliances</li>
                                            <li>Clean inside of microwave</li>
                                        </ul>
                                    </div>
                                    <div class="section-three" style="display: inline-block;width:25%;">
                                        <h3>Bedrooms</h3>
                                        <ul>
                                          <li>Make all beds</li>
                                          <li>Change linens</li>
                                        </ul>
                                    </div>
                                    <div class="section-four" style="display: inline-block;width: 25%;">
                                        <h3>Bathrooms</h3>
                                        <ul>
                                          <li>Scrub &amp; disinfect toilets</li>
                                          <li>Scrub &amp; disinfect tubs</li>
                                          <li>Scrub &amp; disinfect showers</li>
                                          <li>Scrub &amp; disinfect sinks</li>
                                          <li>Scrub &amp; disinfect counters</li>
                                          <li>Clean mirrors</li>
                                          <li>Polish chrome</li>
                                        </ul>
                                    </div>
       </div>

所有房间

掸掉所有家具上的灰尘
擦亮所有家具
掸掉所有杂物。项目
把所有窗台都擦干净
防尘吊扇
清除垃圾
真空地毯
扫地
拖地
对电灯开关进行除尘和消毒

厨房

擦洗及保养；消毒水槽
擦洗及保养；消毒计数器
将碗碟放入洗碗机（如果是空的）
清洁表面
清洁电器外部
清洁微波炉内部

卧室

铺床
换床单

浴室

擦洗及保养；消毒厕所
擦洗及保养；消毒浴缸
擦洗及保养；淋浴消毒
擦洗及保养；消毒水槽
擦洗及保养；消毒柜台
清洁镜子
抛光铬

我还得到了一个“楼梯”效果，因为某些原因，柱比其他柱低。有什么想法吗

---

这里有一个

从每个div中删除

显示：inline块

，然后添加

.listed div {
  float: left;
}

到CSS

---

内联块

默认情况下大约有

4px

的不可见边距，这就是为什么在这种情况下，您现在有

25*4

=大约

100%+16px

我打算提出一个

浮动

解决方案，但既然已经提到了，我想建议挽救你目前的实施

“楼梯”效果可以通过

垂直对齐：top

解决，您可以这样应用：

<div class="section-one" style="display: inline-block;width: 25%; vertical-align:top;">

---

下面是一个演示固定代码的示例。希望这有帮助！如果您有任何问题，请告诉我。

请检查第三版

样式的拼写我的错！非常感谢你！不用担心，值得查看Serlite的答案，它也扩展了我的答案，让您更好地了解
内联块的功能
<div class="section-one" style="display: inline-block;width: 25%; vertical-align:top;">    
    <!-- [section-one content] -->
</div><div class="section-two" style="display: inline-block;width: 25%; vertical-align:top;">
    <!-- [section-two content] -->
</div>