代码之家  ›  专栏  ›  技术社区  ›  phreeskier

无序列表中的演示问题

  •  1
  • phreeskier  · 技术社区  · 15 年前

    我对在无序列表中正确显示项目有异议。标签向左浮动,长的相关跨距将环绕并显示在标签下方。我需要一个解决方案,将相关跨度保持在各自的列中。换句话说,我不希望在标签下显示长跨度。我可以利用什么属性在所有流行的浏览器(包括IE6)中获得所需的布局?事先谢谢你的帮助。

    我的代码如下:

    <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>
    

    我的CSS样式如下:

    ul
    {
        display:block;
        list-style-type:none;
        margin:0;
        padding:0;
    }
    
    ul li label
    {
        float:left;
        width:100px;
    }
    
    1 回复  |  直到 15 年前
        1
  •  1
  •   Zackman    15 年前

    这在Firefox中有效。它也应该在IE6中工作。

    ul li span {
        display: block;
        margin-left: 100px;
    }