时间戳

首页 > 解决方案 > 如何将文本移动到页面右侧？

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

问题描述

我正在尝试重新创建 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>

标签： htmlcss

解决方案

将这些部分分成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>

推荐阅读