CSS标签和格在同一行

这是我的HTMLCSS标签和格在同一行

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

我试图让标签，在同一行的股利但结果是这样的： enter image description here

请问我错过了什么错误？

我已经尝试floatleft和right

，改变display到block和inline-block但结果是保持作为图像。

来源

2014-06-21 user2208349

*我试图让div和股利* - 我觉得你应该再编辑的问题:) – NoobEditor

你怎么想它出现？ – 4dgaurav

您正在使用'label'来对照HTML规范中的定义。这不影响其渲染，但它也没有任何好处。 –

您将看到浮动元素从常规内容流中取出的效果。

可以让你从相互干扰浮动通过改变你的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/

或者，您可以清除浮动正如前面建议。

来源

2014-06-21 14:55:42

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

来源

2014-06-21 14:32:46

*仅支持iE8 + – NoobEditor

CSS标签和格在同一行

回答

相关问题