css - 带选择框的水平列表

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 , 但允许元素包含 block 类型元素，这是正常 display:inline 不允许的风格。

希望对您有所帮助。