html - float : right in css is not working

Question

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

我也在使用 materialize css..

我希望信息图标像这样在右侧对齐，但它不适用于上面的 css:

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

Answer 1

该代码段缺少具有类 .content .chat-section .chat-window 的 parent ，因此它不起作用。

   .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 是一个 flex 容器，因此 float 不起作用。您可以删除 display: flex; 或给 flex 容器 justify-content: space-between;