僅水平渲染

Question

我希望能夠呈現 - 比如說div s - 只能水平顯示（並且如果div s離開屏幕，則顯示水平滾動條）。我試圖模仿在Trello中添加「列表」的能力，因爲「列表」只能水平渲染。我怎樣才能做到這一點？

Answer 1

您可以設置父級忽略包裝。孩子們需要inline-block

.render-x-axis { 
 
    white-space: nowrap; 
 
} 
 
.block { 
 
    background-image: url('http://placehold.it/400x400'); 
 
    width: 400px; 
 
    height: 400px; 
 
    display: inline-block; 
 
}

<div class="render-x-axis"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
</div>