すべてのコンテンツを1行に整列する

Question

すべての行を同じ行に整列する必要があります。ただし、整列されていません。垂直方向にスクロールします。ただし、horizo​​ntal.Andすべてのコンテンツがインラインで整列する必要があります。 私はdisplay:inlineで試してみましたが、使用しません。

$('.pin_box p').map(function() { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}")); 
 
          })

.pin_box{ 
 
    \t z-index:1; 
 
    width:300px; 
 
    height:40px; 
 
    background-color:#fcfcfc; 
 
    overflow:auto; 
 
    } 
 
    .pin_box p{ 
 
    \t position:relative; 
 
    \t float:left; 
 
    \t display:inline-block; 
 
    height:40px; 
 
    \t width:40px; 
 
    border-right:1px solid #ccc; 
 
    \t margin:0; 
 
    \t font-size:12px; 
 
    \t text-align:center; 
 
    \t line-height:40px; 
 
    \t padding:0px 10px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css"> 
 
    <script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script> 
 
<div class="pin_box"> 
 
<p>x^{2}</p> 
 
<p>{x}_{0}</p> 
 
<p>\frac{10}{20}</p> 
 
<p>\frac{d}{dx}{()}</p> 
 
<p>\int{}</p> 
 
<p>\int{}{()}dx</p> 
 
<p>\int_{0}^{0}</p> 
 
<p>\int_{0}^{0}{()}dx</p> 
 

 
</div>

いずれ私の問題を解決するために私を助ける：

は、以下のスニペットが表示されます。 ありがとうございます。

Answer 1

に高さを増やすことができます今すぐ - 300px）。フレックスコンテナを.pin_boxにしてください。

ただ好き：

$('.pin_box p').map(function() { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}")); 
 
          })

.pin_box{ 
 
    display: flex; 
 
    z-index:1; 
 
    width: 300px; 
 
    height: 60px; 
 
    background-color:#fcfcfc; 
 
    overflow:auto; 
 
    } 
 
    .pin_box p{ 
 
    \t position:relative; 
 
    \t float:left; 
 
    \t display:inline-block; 
 
    height:40px; 
 
    \t width:40px; 
 
    border-right:1px solid #ccc; 
 
    \t margin:0; 
 
    \t font-size:12px; 
 
    \t text-align:center; 
 
    \t line-height:40px; 
 
    \t padding:0px 10px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css"> 
 
    <script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script> 
 
<div class="pin_box"> 
 
<p>x^{2}</p> 
 
<p>{x}_{0}</p> 
 
<p>\frac{10}{20}</p> 
 
<p>\frac{d}{dx}{()}</p> 
 
<p>\int{}</p> 
 
<p>\int{}{()}dx</p> 
 
<p>\int_{0}^{0}</p> 
 
<p>\int_{0}^{0}{()}dx</p> 
 

 
</div>

・ホープ、このことができます：

.pin_box { 
    display: flex; 
} 

は、以下のスニペットを見てください！

Answer 2

あなたはあなたの固定幅が必要な場合は、あなたのように（CSSフレキシボックスを使用することができ、あなたのCSSでの自動車としての幅を作るとは50px

$('.pin_box p').map(function() { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}")); 
 
          })

.pin_box{ 
 
    \t z-index:1; 
 
    width:auto; 
 
    height:50px; 
 
    background-color:#fcfcfc; 
 
    overflow:auto; 
 
    } 
 
    .pin_box p{ 
 
    \t position:relative; 
 
    \t float:left; 
 
    \t display:inline-block; 
 
    height:40px; 
 
    \t width:40px; 
 
    border-right:1px solid #ccc; 
 
    \t margin:0; 
 
    \t font-size:12px; 
 
    \t text-align:center; 
 
    \t line-height:40px; 
 
    \t padding:0px 10px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css"> 
 
    <script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script> 
 
<div class="pin_box"> 
 
<p>x^{2}</p> 
 
<p>{x}_{0}</p> 
 
<p>\frac{10}{20}</p> 
 
<p>\frac{d}{dx}{()}</p> 
 
<p>\int{}</p> 
 
<p>\int{}{()}dx</p> 
 
<p>\int_{0}^{0}</p> 
 
<p>\int_{0}^{0}{()}dx</p> 
 

 
</div>