Question

我需要将a元素浮动到右侧的li标记内。在下面，我已附上HTML和CSS文件，请看一下。我需要一个导航栏，其中的元素会向左浮动。

* {
  margin: 0px;
  padding: 0px;
}

div.nav {
  background-color: #009866;
  padding: 10px;
}

.nav ul {
  list-style-type: none;
}

.nav li {
  float: right;
}

<header>
  <div class="nav">
    <ul class="navbar">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</header>

Answer 1

最简单的方法是使用flexbox。您可以使用justify-content

将项目向右对齐

* {
  margin: 0px;
  padding: 0px;
}

div.nav {
  background-color: #009866;
  padding: 10px;
}

.nav ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}

<header>
  <div class="nav">
    <ul class="navbar">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</header>

Answer 2

实际上，我没有阅读您的代码，但是为什么float呢？您可以使用flex代替float。确实很容易理解，使用float包装器和子元素进行的display: block布局需要一个复杂的概念，即名称为clearfix。很难理解。

按如下所示编写代码：

<!DOCTYPE html>
<html>
<head>
    <title>Web Project</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
            direction: rtl;
        }

        .navbar {
            list-style-type: none;
            background-color: #009866;
            padding:10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        li {
            margin: 0 10px;
        }
        li:first-child {
            margin-right: 0;
        }
        li:last-child {
            margin-left: 0;
        }
    </style>
</head>
<body>

<header>
    <ul class="navbar">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</header>

</body>
</html>

但是，如果您坚持使用float，请使用以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Web Project</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
            direction: rtl;
        }

        .clearfix:after {
            content:'';
            display: table;
            clear: both;
        }

        .navbar {
            list-style-type: none;
            background-color: #009866;
            padding:10px;
            display: block;
            justify-content: flex-start;
            align-items: center;
        }
        li {
            margin: 0 10px;
            display: inline-block;
            float: right;
        }
        li:first-child {
            margin-right: 0;
        }
        li:last-child {
            margin-left: 0;
        }
    </style>
</head>
<body>

<header>
    <ul class="navbar clearfix">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</header>

</body>
</html>

希望这些代码对您有所帮助。

将导航栏<li>元素浮动到右侧

2 个答案: