仅在单行上对齐所有内容

Question

我需要在单个 line.But 中对齐所有 p 元素，它不是 aligned.Its 在 vertical.But 中滚动追加我需要 horizontal.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 中将宽度设置为自动，并将高度增加到 50px

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

.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;
  
  }

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

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

就像：

.pin_box {
  display: flex;
}

看看下面的代码片段：

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

希望对您有所帮助！

仅在单行上对齐所有内容

Align the all content only on single line

html

javascript

css

jquery

katex