我想在右侧制作一个div

Question

我尝试将

float: right

和

margin-right: 0

添加到

.links

但没有成功。

这是我的CSS：

.navbar {
  padding: 5px;
  background: white;
  display: flex;
  justify-content: space-between;
}

.ls, .rs {
  display: flex;
  align-items: center;
}

.links {
  background: white;
  position: absolute;
  padding: 5px;
}

.links ul{
  list-style-type: none;
  padding: 0;
}

.links ul li a{
  display: inline-block;
  float: right;
  padding: 10px;
}

这是我的 HTML：

<header>
  <div class="navbar">
    <div class="ls">
      <a href=""><img src="logo.svg" height="40px"></a>
      <a href="">Name</a>
    </div>
    <div class="rs">
      <a href="">Menu</a>
    </div>
  </div>
  <nav class="links">
    <ul>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
    </ul>
  </nav>
</header>

这里我有一个带有

.links

类的 div。我如何让它呈现在右侧。

这是我的第一个堆栈溢出问题:)

Answer 1

您可以在

right: 0

类上设置属性

.links

将其移至最右侧。

.navbar {
  padding: 5px;
  background: white;
  display: flex;
  justify-content: space-between;
}

.ls, .rs{
  display: flex;
  align-items: center;
}

.links {
  background: white;
  position: absolute;
  right: 0;
  padding: 5px;
}

.links ul{
  list-style-type: none;
  padding: 0;
}

.links ul li a{
  display: inline-block;
  float: right;
  padding: 10px;
}

<header>
  <div class="navbar">
    <div class="ls">
      <a href=""><img src="logo.svg" height="40px"></a>
      <a href="">Name</a>
    </div>
    <div class="rs">
      <a href="">Menu</a>
    </div>
  </div>
  <nav class="links">
    <ul>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
    </ul>
  </nav>
</header>