HTML/CSS 元素彼此放置 - 需要可滚动

Question

我有一个装有元素的盒子，它可以很好地处理几件元素，但如果超过 x 件元素，则下一件元素会放在另一件元素下面 - Screenshot .第 8 项需要放在第 7 项旁边，然后该框需要可滚动。

代码:

<ul class="items">
 <div class="box">
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
<li>
    <a href="#">
        <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
        <h5>Test</h5>
        <p class="price">$25.00</p>
    </a>
</li>
</div>
</ul>

CSS:

ul.items li {
    width: 150px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
}
p.price {
    color: #A65353;
}
box {
    background: #fff;
    border: 1px solid #dbdbdb;
    padding-bottom: 5px;
    margin-top: 5px
}

解决方案:

box {
background: #fff;
border: 1px solid #dbdbdb;
padding-bottom: 5px;
margin-top: 5px;
white-space: nowrap;
overflow-x: scroll
}

Answer 1

这样设置

CSS

ul.items li {
    width: 150px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
}
p.price {
    color: #A65353;
}
box {
    background: #fff;
    border: 1px solid #dbdbdb;
    padding-bottom: 5px;
    margin-top: 5px;
    // add this styles
    white-space:no-wrap;
    overflow-x:scroll;
}