CODEWITHSUNDEEP
css
Madison Williams
Madison Williams

Reputation: 350

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

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!

Upvotes: 5

Views: 15979

Answers (3)

Sotiris
Sotiris

Reputation: 40046

I suggest ul.449 { display:inline-table} but it will support ie8+. Another solution with cross browser support I suppose could be to float:left; all elements (input, label, ul) and add margin:0; the ul

First approach: http://jsbin.com/axako3/2

Second approach: http://jsbin.com/axako3/3

Upvotes: 2

Dolph
Dolph

Reputation: 50650

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>

Upvotes: 5

rcravens
rcravens

Reputation: 8390

ul.449{
 display: inline-block;   
}

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

Upvotes: 3

Related Questions