无法在容器内使用右浮动的div

Question

我有一个存放2格的容器。如何将“ .logo”和“ .navbar-list”移动到容器的右边缘。

以前一切正常，但是当我将引导程序切换到版本4.3.1时，我的div重叠了。我尝试了float：right，但是没有用。

container {
  font-family: sans-serif;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding: 0;
}

.logo {
  width: 380px;
  margin-right: 0;
  position: absolute;
  height: 100%;
  margin-left: 10px;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}

<div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

Answer 1

从高层次上讲，这种情况的首选方法是使用flexbox而不是float。不确定您所用的Bootstrap或为什么会发生这种更改。

.container {
    display: flex;
    justify-content: flex-end; /* and many more positioning options */
}

Answer 2

有很多方法可以达到您想要的结果！我认为，Flexbox将是您的最佳选择。您应该将display: flex添加到.container中。如果希望徽标和h1并排放置，也可以将flex添加到.logo容器中。

您还应该避免使用float，因为这通常会使HTML出现异常行为。您可以将其替换为justify-content: space-between。

我已经在上面修改了您的示例以合并我的修改：

.container {
  font-family: sans-serif;
  padding: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 380px;
  /*margin-right: 0; */
  /*position: absolute; */
  height: 100%;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}

<div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

Answer 3

只需将float: right;添加到.navbar-list CSS中，即可将div移动到右侧

 .navbar-list {
   color: white;
   width: 300px;
   height: 100%;
   float: right;
}