Question

我遇到了在无序列表中正确显示项目的问题。标签向左浮动，长度较长的相关跨度包裹并显示在标签下方。我需要一个解决方案，将相关的跨度保持在各自的列中。换句话说，我不希望在标签下显示长跨度。我可以利用什么属性，以便在所有流行的浏览器中获得所需的布局，包括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;
}

Answer 1

这适用于Firefox。它也适用于IE6。

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

无序列表中的演示文稿问题

1 个答案: