テキストが入った横スクロールボックス

Question

私は、各ボックスに情報が均等に表示される水平スクロールボックスを使ってイベントリストを作成しています。テキストとスクロールバーの間にあまりスペースがないようにするにはどうすればよいですか？

.scrollbox { 
 
    overflow-x:scroll; 
 
    overflow-y:hidden; 
 
    -webkit-overflow-scrolling:touch; 
 
    width:750px; 
 
    white-space:nowrap; 
 
    background: white; 
 
    align-content: center; 
 
} 
 

 
.elem { 
 
    display:inline-block; 
 
    width:200px; 
 
    height:200px; 
 
    margin:10px; 
 
font-family: montserrat; 
 
}

<div class="scrollbox"> 
 
    <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p> 
 
     </div> 
 
    <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div> 
 
    <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div> 
 
    <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
    <div class="elem">X</div> 
 
</div> 
 
    </div>

Answer 1

あなたの問題はvertical-alignであると思われます。やってみてください。

.elem { 
    /* ... */ 
    vertical-align: middle; 
} 

私はあなたがこれを使用することがありますどのように知っていないので、私はそれがあなたのために働くだろうまさにだかどうかわかりません。何かが壊れてしまった場合は、vertical-alignをtext-bottom/text-top/bottom/topに設定して修正するかどうかを確認してください。