html - 我怎样才能让两个列表项出现在页面的另一边？

Question

我正在重新创建 Google 的页面作为练习，我看了又看，但是我怎样才能让两个 li，gmail 和图像出现在页面的右侧？另外我可以在我的代码中改进什么？

body {
  font-family: Arial;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

img {
  width: auto;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15%;
}

.searchbar {
  text-align: center;
}

.nav_bar {
  word-spacing: 10px;
}

<nav class="nav_bar">
  <ul>
    <li>About</li>
    <li>Store</li>
    <li>Gmail</li>
    <li>Images</li>
  </ul>
</nav>
<div class="google">
  <img src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="google">
</div>
<div class="searchbar">
  <input type="text" placeholder="Search..." id="search">
</div>

Answer 1

您需要将元素向右浮动，例如:

.nav_bar ul {
  float: right;
}

作为更一般的评论，您可以将 HTML 和 CSS 组织在不同的文件中，以更好地区分内容和样式。尝试关注 W3 basic tutorial了解网络标记背后的第一个概念。