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標籤和格在同一行

回答

相關問題