Question

我有一个ul，我想要横向内嵌。查看目前的情况here。我需要粉色，橙色和＆amp;蓝色框显示内联。有人可以帮忙吗？

这是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; 
}

如何获得ul列表od divs以显示内联？

1 个答案: