Question

我正在使用<ul><li>列表标签，其中我有3个标签，例如sos：

<ul id="reg-lists" >
    <li class="one">
            <select>...</select>
        </li> 
    <li class="two">
            <select>...</select>
        </li> 
    <li class="three">
            <select>...</select>
        </li> 
    </ul>

我有适当的CSS使列表水平：

#the-form li {
    display:inline !important;
    list-style-type: none;
    padding-right: 10px;    
}

我似乎无法工作但不确定为什么。在放置组合之前，水平规则似乎很适用。非常感谢你的帮助。感谢

Answer 1

它适用于我 - see this JSFiddle - 列表项是水平显示的，至少在Firefox中查看时是这样。

如果您在其他浏览器中看到其他内容，请告诉我们。

如果是这种情况，解决方案可能是使用display:inline-block而不是display:inline。

inline-block与inline类似，但允许元素包含块类型元素，而普通display:inline样式不允许这样做。

希望有所帮助。

Answer 2

您需要为<ul>设置一个宽度，该宽度等于所有合并<li>的宽度，然后将<li>设置为float:left;

带选择框的水平列表

2 个答案: