问题:
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;
}