모든 내용을 한 줄로 만 정렬

Question

한 줄로 모두 p 요소를 정렬해야합니다. 그러나 정렬되지 않았습니다. 세로 스크롤이 추가됩니다. 그러나 가로가 필요합니다. 모든 내용이 인라인으로 정렬됩니다. 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 인 flexbox를 사용할 수있는 50 픽셀

$('.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>