CSS标签和div在同一行

Question

这是我的HTML

<div id="restaurantInformation">
    <ul>
        <li>
            <label>Logo</label>
            <div class="oneInfo">
                <div class="fileupload-new thumbnail" >
                    <img src="../img/logo_test.jpg" alt="Profile Avatar" style="width: 180px; height: 180px;"/>
                </div>
            </div>
        </li>
        <li>
            <label>username</label>
            <div class="oneInfo">

            </div>
        </li>
    </ul>
</div>

这是CSS

#restaurantInformation{
    position: relative;
    background-color: red;
}
#restaurantInformation ul li{
    list-style: none;
    margin-bottom: 10px;
}
#restaurantInformation ul li label{
    width: 20%;
    display: block;
    float: left;
}
#restaurantInformation ul li .oneInfo{
    width: 60%;
    float: right;
    background-color: #066ECD;
}

我试图使标签和div在同一行上，但是结果是这样的：

我想念什么错了吗？

我已经尝试float left和right

并将display更改为block和inline-block但结果保持为图像。

Answer 1

您会看到从常规内容流中删除浮动元素的效果。

您可以通过如下更改CSS来防止浮动对象相互干扰：

#restaurantInformation ul li{
    list-style: none;
    margin-bottom: 10px;
    overflow: auto; /* trigger a new block formatting context */
}

添加overflow: auto将创建一个新的块格式化上下文，这意味着li内的浮动元素将由li块的边界限制。

参见演示： http : //jsfiddle.net/audetwebdesign/xd7aU/

或者，您可以按照前面的建议清除浮子。

Answer 2

您可以将display:table属性用于label并添加vertical-align: middle以将Label内容置于框的中间。