Presentation Issue in an Unordered List

Posted by phreeskier on Stack Overflow See other posts from Stack Overflow or by phreeskier
Published on 2010-06-07T18:47:11Z Indexed on 2010/06/07 19:42 UTC
Read the original article Hit count: 286

Filed under:
|
|
|

I'm having an issue with correctly presenting items in an unordered list. The labels are floating left and the related spans that are long in length are wrapping and showing below the label. I need a solution that keeps the related spans in their respective columns. In other words, I don't want long spans to show under the labels. What property can I take advantage of so that I get the desired layout in all of the popular browsers, including IE6? Thanks in advance for the help.

My code is as follows:

<ul>
    <li>
        <label>Name</label>
        <span><%= Html.Encode(Model.Name) %></span>
    </li>
    <li>
        <label>Entity</label>
        <span><%= Html.Encode(Model.Entity) %></span>
    </li>
    <li>
        <label>Phone</label>
        <span><%= Html.Encode(Model.Phone) %></span>
    </li>
</ul>

My CSS styling is as follows:

ul
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul li label
{
    float:left;
    width:100px;
}

© Stack Overflow or respective owner

Related posts about html

Related posts about css