浮動：正確的CSS不工作

-1

我是一個初學者在CSS。我正在嘗試將右側的信息圖標對齊。浮動：正確的CSS不工作

的HTML和CSS我有低於：

.content > .chat-section > .chat-window > .chat-top-bar { 
 
     height: 8%; 
 
     width: 100%; 
 
     box-shadow: 1px 2px 5px #888888; 
 
     background-color: white; 
 
     z-index: 10; 
 
    } 
 
    .content > .chat-section > .chat-window > .chat-top-bar > #room-id { 
 
    margin-left: 20px; 
 
    font-size: 18px; 
 
    float: left; 
 
    } 
 
    
 
    .content > .chat-section > .chat-window > .chat-top-bar > #room-info { 
 
    float: right; 
 
    }

<div class="chat-top-bar valign-wrapper"> 
 
    <p id="room-id"><b>Title</b></p> 
 
    <i class="material-icons" id="room-info">info</i> 
 
    </div>

而且我使用CSS物化..

我想要的信息圖標的右側對齊一樣這，但它不與上面的CSS工作：

完整代碼：https://codepen.io/buckydroid/pen/rzRzrN

來源

2017-09-04 Kim

您是浮ID爲元素'房間info'，但該圖標類'材料icons' – FluffyKitten

@FluffyKitten NVM我不小心刪除它而寫的問題... – Kim

你可以提供包含'.content'，'.chat-section'，'.chat-window'的完整模板 – masterpreenz

的片段缺乏父母班。內容.chat節.chat窗口所以這是行不通的。

.content > .chat-section > .chat-window > .chat-top-bar { 
 
     height: 8%; 
 
     width: 100%; 
 
     box-shadow: 1px 2px 5px #888888; 
 
     background-color: white; 
 
     z-index: 10; 
 
    } 
 
    .content > .chat-section > .chat-window > .chat-top-bar > #room-id { 
 
    margin-left: 20px; 
 
    font-size: 18px; 
 
    float: left; 
 
    } 
 
    
 
    .content > .chat-section > .chat-window > .chat-top-bar > #room-info { 
 
    float: right; 
 
    }

<div class="content"> 
 
    <div class="chat-section"> 
 
     <div class="chat-window"> 
 
     <div class="chat-top-bar valign-wrapper"> 
 
      <p id="room-id"><b>Title</b></p> 
 
      <i class="material-icons" id="room-info">info</i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

更新

的.valign-wrapper是柔性容器，彩車不起作用。你可以刪除display: flex;或給予柔性容器justify-content: space-between;

來源

2017-09-04 02:18:08 itacode

我添加了有問題的完整代碼。 – Kim

我已更新答案。 – itacode

在chat-top-bar中添加justify-content：space-between解決了問題。非常感謝.. – Kim

p標籤是block元素，讓inline-block加入display:inline-block財產。

CSS

#room-id{ 
display:inline-block; 
}

來源

2017-09-04 02:15:23

這不會解決問題 - 房間id段完全獨立於OP試圖浮動的''元素 – FluffyKitten

+1

將i標記放在p標記內 –

+0

這並不能解決問題 – FluffyKitten

0

您CSS還不能在所有

.content > .chat-section > .chat-window > .chat-top-bar { height: 8%; width: 100%; box-shadow: 1px 2px 5px #888888; background-color: white; z-index: 10; } .content > .chat-section > .chat-window > .chat-top-bar > #room-id { margin-left: 20px; font-size: 18px; float: left; } .content > .chat-section > .chat-window > .chat-top-bar > #room-info { float: right; }

這個.chat-top-bar > #room-id這.chat-top-bar > #room-info一直致力於爲所有，但可能不是的情況可能是真的父選擇作爲> first child selector僅選擇這將是在這個順序第一子元素：

<div class="content"> <div class="chat-section"> <div class="chat-window"> <div class="chat-top-bar valign-wrapper"> <p id="room-id"><b>Title</b></p> <i class="material-icons" id="room-info">info</i> </div> </div> </div> </div>

是否有另一個容器包裝那些你的.content > .chat-section > .chat-window > .chat-top-bar > #room-info將失敗。只要刪除>你不需要它。

此外，使<p>display: inline-block爲<p>是一個默認的塊元素和塊元素默認包含100% width。

希望幫助

來源

2017-09-04 02:24:06 masterpreenz

浮動：正確的CSS不工作

回答

相關問題