Geek Answers Handbook

Display the <ul> tag on the same line as the text

I am trying to draw an <ul>inline tag with a line of text. here is 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 is he doing now:

Whats that?
  Li element
  Li element
  Li element
  Li element

But I want it to look like this:

Whats that? Li element
            Li element
            Li element
            Li element

What CSS rules do I need to insert in <ul>? And no matter what the class name is, it is for zany javascript purposes. Thank!

+5
source share
3 answers

Swim 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>
+5
source 
ul.449{
 display: inline-block;   
}

Will it be embedded. Vertical alignment is a bit strange.

+3
source

ul.449 { display:inline-table}, ie8+. -, , float:left; (input, label, ul) margin:0; the ul

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

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

+2

More articles:


All Articles