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以将标签内容置于框中间。