Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a <ul> tag display on the same line as text

Tags:

css

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!

like image 213
Madison Williams Avatar asked Jan 28 '11 19:01

Madison Williams


People also ask

How do you display ul li on one line?

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.

How do I display text on the same line?

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.

What is the difference between inline and inline-block?

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.


2 Answers

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>
like image 131
Dolph Avatar answered Sep 20 '22 05:09

Dolph


ul.449{
 display: inline-block;   
}

Will get it inline. The vertical alignment is a bit weird.

like image 21
rcravens Avatar answered Sep 23 '22 05:09

rcravens