Question

我已经按照惯例重新创建了Google的页面，但是如何使两个li，gmail和image出现在页面的右侧？另外，我可以在代码中进行哪些改进？

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来捕捉网络标记背后的第一个概念。

Answer 2

我了解到您只想在右侧添加“图片”和“ gmail”，因此您可以执行此操作（代码在注释中）

祝你好运

<nav class="nav_bar">
      <ul>
    <li>About</li>
        <li>Store</li>
        <li>Images</li>
        <li>Gmail</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>

CSS

body{
  font-family: Arial;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li{
  display: inline;
  float:left;
  padding: 0 5px;
}

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.nav_bar li:nth-child(3), nav.nav_bar li:nth-child(4) {
    float: right;
}

Answer 3

理想的方法是在屏幕的左侧和右侧分别设置菜单ul。

因此，您可以使用float属性以一种干净的方式将右侧菜单移至右侧。

代码如下：

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;
}

.menu_left{
  float: left;
}

.menu_right{
  float: right;
}

<nav class="nav_bar">
  <ul class="menu_left">
    <li>About</li>
    <li>Store</li>
  </ul>
  <ul class="menu_right">
    <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>

我希望它会有所帮助。

如何使两个列表项位于页面的另一侧？

3 个答案: