Search code examples
htmlcssstylesheet

How to position ul list after a label?


I would like to name my ul list with a label and place the ul list just after it and not below like the default. My ul list is in one line, so the result (label + list) should be in one line.

Here is what I have so far :

HTML:

<label>test :</label>
<ul>
    <li>word1</li>
    <li>word2</li>
</ul>

CSS:

ul {
    overflow-x:hidden;
    white-space:nowrap;
}

li {
    display:inline;
}

See: http://jsfiddle.net/72YA4/


Solution

  • Is that you what to achieve? http://jsfiddle.net/jslayer/72YA4/3/

    ul {
        overflow-x:hidden;
        white-space:nowrap;
        display: inline-block;
        padding: 0;
        margin: 0;
        vertical-align: top;
    }
    
    li {
        display:inline;
    }
    
    label {
        display: inline-block;
        vertical-align: top;
    }