我正在为一个项目的谷歌主页创建一个前端，但我对如何应用导航栏的间距相同的原始谷歌主页感到困惑。下面的代码有这样的间距:about Store Images Sign in但是我想要这样的内容about Store Images Sign in。
null
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
} <!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<a href="#" id="about">About</a>
<a href="#" id="store">Store</a>
<a href="#" id="images">Images</a>
<a href="#" id="sign-in">Sign in</a>
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
<a href="#" id="advertising">Advertising</a>
<a href="#" id="business">Business</a>
<a href="#" id="how_search_works">How Search works</a>
<a href="#" id="privacy">Privacy</a>
<a href="#" id="terms">Terms</a>
<a href="#" id="settings">Settings</a>
</div>
</body>
</html>null
我将感谢任何帮助或建议为此。
下面是一个使用display:flex和justify-content:space-between；的解决方案
null
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
#header {
display: flex;
justify-content: space-between;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<div>
<a href="#" id="about">About</a>
<a href="#" id="store">Store</a>
</div>
<div>
<a href="#" id="images">Images</a>
<a href="#" id="sign-in">Sign in</a>
</div>
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
<a href="#" id="advertising">Advertising</a>
<a href="#" id="business">Business</a>
<a href="#" id="how_search_works">How Search works</a>
<a href="#" id="privacy">Privacy</a>
<a href="#" id="terms">Terms</a>
<a href="#" id="settings">Settings</a>
</div>
</body>
</html>