我如何获得 div 的 ul 列表以内联显示？

Question

我有一个 ul 想要水平内联。查看它当前的样子 here。我需要粉红色、橙色和蓝色框来显示内联。有人可以帮忙吗？

这是HTML：

<div id="header-li">
    <ul class="header-i">
        <li>
            <div class="quick-i1"></div>
        </li>
        <li>
            <div class="quick-i2"></div
        </li>
        <li>
            <div class="quick-i3"></div>
        </li>
    </ul>
</div>

这里是 CSS 代码：

#header-li {
    display: inline-block;
    height: 60px;
    width: 500px;
    border: 1px solid #000000;
    margin: 10px;
    padding: 0;
    position: relative;
    vertical-align: middle;
}
.quick-i {
    height:70px;
    width: 166px;
    border: 1px solid #000000;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0 0 0 0;
    padding: 0px;
}
ul.header-i {
    display: inline-block;
    list-style-type: none !important;
    padding: 0;
    list-style-type: none;
}
.quick-i1 {
    height: 50px;
    width: 100px;
    border: 2px solid orange;
    position: relative;
    margin-top: 4px;
    display: inline-block;
}
.quick-i2 {
    height: 50px;
    width: 100px;
    border: 2px solid yellow;
    position: relative;
    margin-top: 4px;
    display: inline-block;
}
.quick-i3 {
    height: 50px;
    width: 231px;
    border: 2px solid blue;
    position: relative;
    margin-top: 4px;
    display: inline-block;
}

Answer 1

您也需要将 li 设置为内联：

.header-i li  
{  
    display:inline-block; 
}

我如何获得 div 的 ul 列表以内联显示？

How do I to get a ul list od divs to display inline?

css

wordpress

inline