prasad prasad - 6 days ago 4
CSS Question

Align the all content only on single line

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.

Answer

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!