Float：在css中没有用

Question

我是css的初学者。我试图将我的信息图标对齐在右侧。

我的HTML和CSS如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我也在使用materialize css ..

我希望信息图标像这样在右侧对齐，但它不能与上面的css一起使用：

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

Answer 1

该片段缺少带有.content .chat-section .chat-window的父母，所以它不起作用。

// then get an array that contains the signs without spaces
String[] signsArray = signString.trim().split(" +");

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

Answer 2

p标记是block个元素，通过添加inline-block属性使其成为display:inline-block。

CSS

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

Answer 3

您的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。

希望有所帮助