I'm trying to make a <ul>
tag display inline with a line of text. here's the HTML.
<li>
<input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
<ul class="449">
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
</ul>
</li>
What it renders as now is this:
Whats that?
Li element
Li element
Li element
Li element
But I want it to render like this:
Whats that? Li element
Li element
Li element
Li element
What CSS rules do i need to put into that <ul>
? And nevermind that class name, it's for zany javascript purposes. Thank you!
The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Float them:
p, ul {
float: left;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
<p>Whats that?</p>
<ul>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
</ul>
ul.449{
display: inline-block;
}
Will get it inline. The vertical alignment is a bit weird.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With