Question

我不确定为什么带有导航栏的标头元素不会通过“ float：right;”浮动到右侧。

我刚开始使用html＆CSS，我希望有人可以帮助使我的导航栏浮动到右侧。我查看了几个视频和堆栈溢出，但是我不确定是怎么回事，我只是通过查找一些从Bootstrap，W3和其他网站开始的内容开始。

我的下面的代码

*,
html,
body {
  margin: 0;
  padding: 0;
}

header {
  background-color: deepskyblue;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

header nav {
  float: right 1;
}

header nav ul li a {
  padding-right: 30px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in-out;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
  <div class="container">
    <div class="row">
      <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Clients</a></li>
          <li><a href="">Our Team</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>

    </div>
    <p>This is some text.</p>
  </div>
</header>

Answer 1

只需删除container元素。

*, html, body
{
    margin: 0;
    padding: 0;
}

header
{
    background-color: deepskyblue;
}


ul
{
    list-style: none;
}

ul li{
    display: inline-block;
}

header nav 
{
    float: right;
}

header nav ul li a
{
    padding-right: 30px;
    font-weight: bold;
    color: white;

    transition: all 0.5s ease-in-out;
}

<!DOCTYPE html>

<html>
<head>
    <title>Website Project</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>

      <div class="row">
                    <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
            <nav>
               <ul>
                  <li><a href="">Home</a></li>
                  <li><a href="">Work</a></li>
                  <li><a href="">Services</a></li>
                  <li><a href="">Clients</a></li>
                  <li><a href="">Our Team</a></li>
                  <li><a href="">Contact</a></li>
               </ul>
            </nav>

        </div>
        <p>This is some text.</p>
            
</header>


</body>
</html>

Answer 2

在这里，Bootraps .row类向div添加了flex框，这实际上阻止了右浮动CSS。在flex容器中，float属性将被忽略。

根据Flexbox规范：

flex容器为其内容建立新的flex格式上下文。这与建立块格式化上下文相同，除了使用Flex布局而不是块布局。因此浮动不会产生弹性项目的浮动或间隙。

删除.row类，您的float样式应开始工作！

<header>元素未在右侧导航栏上浮动

2 个答案: