How can i make two list items go on the other side of the page?

问题: I am recreating Google's page as practice, I have looked and looked, but how can I make two li, gmail and images, appear on the right side of the page? Also what can I impr...

问题:

I am recreating Google's page as practice, I have looked and looked, but how can I make two li, gmail and images, appear on the right side of the page? Also what can I improve on in my code?

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="/uploads/ite//a306c32811fffbee84416cae5a316171.jpg" alt="google">
</div>
<div class="searchbar">
  <input type="text" placeholder="Search..." id="search">
</div>


回答1:

Ideal way is to have separate menu ul for the left and for right side of the screen.

So then you can use float property to move the menu for right to the right side in a clean way.

The code will look like this:

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="/uploads/ite//a306c32811fffbee84416cae5a316171.jpg" alt="google">
</div>
<div class="searchbar">
  <input type="text" placeholder="Search..." id="search">
</div>

I hope it helps.


回答2:

You need to float the element to the right, for instance with:

.nav_bar ul {
  float: right;
}

As a more general comment, you could organize the HTML and CSS in different files, to better diferentiate between the content and the styles. Try to follow the W3 basic tutorial to catch the first concepts behind markup for the web.


回答3:

I have understand that you want to put only "images" and "gmail" on the right, so you can do this (the code is on the comment)

Good luck

<nav class="nav_bar">
      <ul>
    <li>About</li>
        <li>Store</li>
        <li>Images</li>
        <li>Gmail</li>
      </ul>
    </nav>
        <div class="google">
          <img src="/uploads/ite//a306c32811fffbee84416cae5a316171.jpg" 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;
}
  • 发表于 2019-03-22 04:13
  • 阅读 ( 191 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除