HTML 无序列表在下方移动一行

Question

好吧，这段代码的问题在于，在第二个无序列表之后，第三个无序列表移动到下面的新行。我不希望任何列表向下移动到新行，而是从左到右直线移动。

<div id="plans">
    <ul>
        <li><h3>People</h3></li>
        <li>3 </li>
        <li>3 </li>
        <li>3 </li>
        <li>4 </li>
        <li>4 </li>
        <li>4 </li>
        <li>4 </li>
        <li>4 </li>
    </ul>
    <ul>
        <li><h3>Humans</h3></li>
        <li>2.5</li>
        <li>2.5</li>
        <li>2.5</li>
        <li>3.5</li>
        <li>3.5</li>
        <li>3.5</li>
        <li>3.5</li>
        <li>3.5</li>    
    </ul>
    <ul>
        <li><h3>More Humans</h3></li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
        <li>500</li>
    </ul>

这是我的 CSS:

#plans ul{
    padding: 5px;
    display: inline-block;
    margin: 20px;
}

Answer 1

您可以添加 min-width

DEMO

#plans {
    min-width:480px;
}