Question

所以我试图跨越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>

我也得到了一个“阶梯”效应，因为某些原因，列比其他列低。有什么想法吗？

这是demo

Answer 1

从每个div中删除display: inline-block并添加

.listed div {
  float: left;
}

到CSS

默认情况下，

inline-block的隐身边距大约为4px，这就是为什么目前25*4 =大约100%+16px

Answer 2

我打算提出一个float解决方案，但既然已经提到过，我想提议挽救你目前的实施方案。

可以使用vertical-align:top解决“阶梯”效应，您可以这样使用：

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

然而，由于inline-block元素的行为，你不能在一行中放入4列，尽管它们各自的宽度为25％。如果它们与兄弟inline或inline-block元素之间存在任何空格，则它将在浏览器中呈现为空格。（您的最后一列被推到下一行，因为在第一行的列之间有一些额外的空格。）

有多种方法可以解决这个问题，但最简单的解决方法是消除相邻列的开始/结束标记之间的空白。例如：

<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>

这是一个JSfiddle来演示固定代码。希望这可以帮助！如果您有任何问题，请告诉我。

无法使水平列工作

2 个答案: