Question

我正在尝试重新创建www.google.com，如果您在顶部看到左侧为“关于”和“商店”，而右侧则为“图像”和“ Gmail”。在保留字词之间的间距的同时，如何在右侧正确显示图片和Gmail？

我尝试填充，但是搞砸了格式，然后浮动：对；将我想要的内容推到右边，但单词之间的距离为0。

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav a {
  text-decoration: none;
  color: #696969;
}

.nav .gmail,
.nav .images {}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <a class='about' href='www.google.com/#'>About</a>
    <a class='store' href='www.google.com/#'>Store</a>
    <a class='images' href='www.google.com/#'>Images</a>
    <a class='gmail' href='www.google.com/#'>Gmail</a>

  </div>
  <div class='logo'>
    <img class='googlelogo' src='https://cdn.vox-cdn.com/uploads/chorus_asset/file/4019334/OGB-INSIDER-BLOGS-GoogleLogox2-Animated.0.gif' alt='Google logo' height='100'>
  </div>
</body>

</html>

Answer 1

将这些部分分为nav-left和nav-right，然后使用flexbox等距隔开它们。

.nav {
  display: flex;
  justify-content: space-between;
}

.googlelogo {
  margin: 0 auto;
  margin-top: 150px;
}

.nav { /* Added CSS for Flexbox */
  display: flex;
  justify-content: space-between;
}

.nav a {
  text-decoration: none;
  color: #696969;
}

.nav .gmail,
.nav .images {}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <div class="nav-left"> <!-- Added HTML: Left Section Wrap -->
      <a class='about' href='www.google.com/#'>About</a>
      <a class='store' href='www.google.com/#'>Store</a>
    </div>
    <div class="nav-right"> <!-- Added HTML: Right Section Wrap -->
      <a class='images' href='www.google.com/#'>Images</a>
      <a class='gmail' href='www.google.com/#'>Gmail</a>
    </div>
  </div>
  <div class='logo'>
    <img class='googlelogo' src='images/google.png' alt='Google logo' height='100'>
  </div>
</body>

</html>

Answer 2

您可以使用float: right进行右对齐（如果您将float: right添加到.nav .gmail, .nav .images上将同时应用于两者，因此请在div中将二者包围并应用于此。

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav a {
  text-decoration: none;
  color: #696969;
}
.nav .pull-right {
  float:right;
}
.nav::after{
clear: right;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <a class='about' href='www.google.com/#'>About</a>
    <a class='store' href='www.google.com/#'>Store</a>
    <div class="pull-right">
      <a class='images' href='www.google.com/#'>Images</a>
      <a class='gmail' href='www.google.com/#'>Gmail</a>
    </div>

  </div>
  <div class='logo'>
    <img class='googlelogo' src='images/google.png' alt='Google logo' height='100'>
  </div>
</body>

</html>

Answer 3

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav a {
  text-decoration: none;
  color: #696969;
}

.nav .gmail,
.nav .images {}

.nav .gmail, .images {
  float: right;
  padding-right: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <a class='about' href='www.google.com/#'>About</a>
    <a class='store' href='www.google.com/#'>Store</a>
    <a class='images' href='www.google.com/#'>Images</a>
    <a class='gmail' href='www.google.com/#'>Gmail</a>

  </div>
  <div class='logo'>
    <img class='googlelogo' src='https://cdn.vox-cdn.com/uploads/chorus_asset/file/4019334/OGB-INSIDER-BLOGS-GoogleLogox2-Animated.0.gif' alt='Google logo' height='100'>
  </div>
</body>

</html>

Answer 4

为代码使用Flex布局。

使用以下代码更新CSS：

.nav{
  display:flex;  
  justify-content: space-around;
}

.nav a {
  text-decoration: none;
  color: #696969;
  padding: 16px;
}

并将html更改为：

<div class='nav'>
    <div>
      <a class='about' href='www.google.com/#'>About</a>
      <a class='store' href='www.google.com/#'>Store</a>
    </div>
    <div>
      <a class='images' href='www.google.com/#'>Images</a>
      <a class='gmail' href='www.google.com/#'>Gmail</a>
    </div>
</div>

Answer 5

这是我的解决方案。我认为它将满足您的要求。我在css文件的底部添加了一些代码行，并通过注释将它们分开。我使用flexbox技术解决了这个问题。希望对您有帮助。

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav a {
  text-decoration: none;
  color: #696969;
  margin-right: 2vw;
}

/* These are the code I've newly added */
.nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.nav .images {
  margin-left: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <a class='about' href='www.google.com/#'>About</a>
    <a class='store' href='www.google.com/#'>Store</a>
    <a class='images' href='www.google.com/#'>Images</a>
    <a class='gmail' href='www.google.com/#'>Gmail</a>

  </div>
  <div class='logo'>
    <img class='googlelogo' src='https://cdn.vox-cdn.com/uploads/chorus_asset/file/4019334/OGB-INSIDER-BLOGS-GoogleLogox2-Animated.0.gif' alt='Google logo' height='100'>
  </div>
</body>

</html>

如何将文本移到页面右侧？

5 个答案: