仅在单行上对齐所有内容

Question

我需要将所有p元素对齐在一行中。但它没有对齐。它滚动追加在vertical.But我需要horizo​​ntal.And所有内容对齐内联。 我尝试使用display:inline但没有用。

请参阅以下代码段：

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

.pin_box{
  	z-index:1;
   width:300px;
   height:40px;
   background-color:#fcfcfc;  
  overflow:auto;
  }
  .pin_box p{
  	position:relative;
  	float:left;
  	display:inline-block;
  height:40px;
  	width:40px;
   border-right:1px solid #ccc;
  	margin:0;
  	font-size:12px;
  	text-align:center;
  	line-height:40px;
  	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

如果您需要固定宽度，可以使用 CSS Flexbox （正如您现在所做的那样 - 300px）。只需将.pin_box设为灵活容器即可。

就像：

.pin_box {
  display: flex;
}

请看下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

您可以在css中将宽度设置为auto，并将高度增加到50px

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;