我正在尝试重新创建 www.google.com，如果您在顶部看到左侧有“关于”和“商店”，右侧有“图片”和“Gmail”。我究竟如何才能将图像和 Gmail 置于右侧，同时保留单词之间的空间？
我尝试了填充，但这搞乱了格式，并且 float :正确；将我想要的内容推到右侧，但在单词之间放置 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>最佳答案
将这些部分分为 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>关于html - 如何将文本移动到页面右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56973596/