Question

  <div class="container">
    <nav>
      <ul>
        <li><a class="nav-link" href="#">Gmail</a></li>
        <li><a class="nav-link" href="#">Images</a></li>
        <li><a id="nav-dots" href="#"><img src="./img/dots.jpg"></a></li>
        <li><a id="sign-in" href="#">Sign in</a></li>
      </ul>
    </nav>
  </div>

  <section id="google-logo">
    <div class="container">
      <img src="./img/logo.jpg" alt="Google Logo">
    </div>
  </section>

嗨，大家好，我正在尝试复制Google主页，并且遇到了定位Google徽标的问题。您可以从下面的CSS中看到我使用了float：右键来定位导航栏，但是现在当我尝试设置Google徽标的样式时，它将它放在与导航栏相同的行上。因此，当我以中心为例时，它在导航栏和左边距之间居中。我希望这可以作为一个块放在下面。

下面的CSS：

body {
  margin:0;
  padding:0;
  font-family:Arial;
}

/*GLOBAL */
.container {
  width:96%;
  margin:auto;
  text-align: center;
}

ul {
  padding:0;
  margin:0;
}

/* NAV */
nav {
  float: right;
  width: auto;
  margin-top: 17px;
}

nav li {
  display:inline;
}

nav .nav-link {
  text-decoration:none;
  color: #222;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-right: 7px;
}

nav #nav-dots {
  position: relative;
  top: 5px;
  margin: 0 18px 0 10px;
}

nav #sign-in {
  text-decoration: none;
  color: #fff;
  background-color: #4787ED;
  padding: 7px 12px 8px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 3px;
}

#google-logo {
}

Answer 1

您可以在＃google-logo上使用clear:both;属性。

   #google-logo {
        clear:both;
    }

清除它们会在＆＃34;显示中阻止浮动元素的非浮动元素：块＆＃34;方式。

Answer 2

使用position属性，而不是浮动导航。代码示例：

nav { position: absolute; top: 17px; right: 0; }

Answer 3

只需添加到您的CSS：

.container:after{
   content:"";
   clear: both;
 }

你很高兴。

Answer 4

clear属性与浮动直接相关。如果元素可以水平地适合在另一个元素旁边的空间中漂浮，它会。除非你在同一个元素中明确应用作为浮动的方向。然后元素将向下移动浮动元素。

<script>
    $.ajax({
        type: 'POST',
        url: '/pasta',
        data: {
            form_data: '{{form_data}}',
        },
        success: function() {
            window.location.replace('/pasta');
        }
      });
</script>

使用Float后的CSS定位

5 个答案: