Align the all content only on single line

Question

I need to align all p element in a single line.But its not aligned.Its scroll append in vertical.But i need horizontal.And all the content align inline. I Try with display:inline but no use.

see the below snippet:

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

Any one help me to solve my problem. Thanks in advance.

Saurav Rastogi · Accepted Answer · 2016-12-01T13:37:55.543

You can use CSS Flexbox if you need your a fixed width (as you've right now - 300px). Just make your .pin_box a flex container.

Just like:

.pin_box {
  display: flex;
}

Have a look at the snippet below:

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

Hope this helps!

Nope...i need overflow.and dont change the width of the pin_box — prasanth, Dec 01 '16 at 13:37
@prasad Have a look at my updated answer, is this what you are looking for? — Saurav Rastogi, Dec 01 '16 at 13:38

score 0 · Answer 2 · answered Dec 01 '16 at 13:32

You can make the width as auto in your css and increase the height to 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>

Align the all content only on single line

2 Answers2