需要帮助，
我使用position：absolute来定位我的Google徽标，搜索栏和按钮。
还有其他方法可以提高时间效率，并且可以提供更清晰的代码（我正在寻找更好的选择，因为我仍然非常环保......）
那说，有没有办法可以在页面底部为我想要的元素做导航栏。一些元素将与左侧对齐而其他元素将与右侧对齐。？
这些是我的代码：
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: transparent;
}
li{
display:block;
float: right;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
button a {
}
.google-logo {
position: absolute;
margin: 10em 32.5em;
}
.feeling-lucky {
position: absolute;
margin: 20em 32.5em;
width: 400px;
}
#searchbar {
position: absolute;
top: 260px;
left: 375px;
width: 580px;
height: 30px;
border: 1px solid #cdcdcd;
}
#search_button {
position: absolute;
top: 310px;
left: 550px;
border: 1px solid #dcdcdc;
border-color: rgba(0, 0, 0, 0.1);
color: #444!important;
font-size: 11px;
font-weight: bold;
padding: 8px;
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
border-radius: 2px;
}
#lucky_button {
position: absolute;
top: 310px;
left: 680px;
border: 1px solid #dcdcdc;
border-color: rgba(0, 0, 0, 0.1);
color: #444!important;
font-size: 11px;
font-weight: bold;
padding: 8px;
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
border-radius: 2px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
margin: : 20em;
}<!DOCTYPE html>
<html>
<head>
<title>Google Homepage</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav class = "header">
<div class="col-xs-8">
<ul>
<li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>
</nav>
<div class="google-logo">
<img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
</div>
<div>
<input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
<input type="button" value="Google Search" id="search_button">
</div>
<input type="button" value="I'm Feeling Lucky" id="lucky_button">
</br>
<div class="footer">
<a href="#">Advertising</a><a href="#">Business</a><a href="#">About</a>
</div>
</body>
</html>
答案 0 :(得分：1)
考虑到你当前的页脚看起来如何，我假设你想要甚至分散，我的运作方式。请查看以下代码。这是用bootstrap 3实现的，但是如果你是新手，我建议提供bootstrap 4或实现尝试并练习。
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: transparent;
}
li {
display: block;
float: right;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
button a {}
.google-logo {
position: absolute;
margin: 10em 32.5em;
}
.feeling-lucky {
position: absolute;
margin: 20em 32.5em;
width: 400px;
}
#searchbar {
position: absolute;
top: 260px;
left: 375px;
width: 580px;
height: 30px;
border: 1px solid #cdcdcd;
}
#search_button {
position: absolute;
top: 310px;
left: 550px;
border: 1px solid #dcdcdc;
border-color: rgba(0, 0, 0, 0.1);
color: #444!important;
font-size: 11px;
font-weight: bold;
padding: 8px;
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
border-radius: 2px;
}
#lucky_button {
position: absolute;
top: 310px;
left: 680px;
border: 1px solid #dcdcdc;
border-color: rgba(0, 0, 0, 0.1);
color: #444!important;
font-size: 11px;
font-weight: bold;
padding: 8px;
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
border-radius: 2px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
margin: : 20em;
}
.footer-link {
margin-left: 10px;
color: #000;
}
.move-left {
float: left;
}
.move-right {
float: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="header">
<div class="col-xs-8">
<ul>
<li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>
</nav>
<div class="google-logo">
<img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
</div>
<div>
<input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
<input type="button" value="Google Search" id="search_button">
</div>
<input type="button" value="I'm Feeling Lucky" id="lucky_button">
</br>
<div class="footer">
<div class='container-fluid'>
<div class='col-md-4'>
<a href="#" class='footer-link move-left'>Advertising</a>
<a href="#" class='footer-link move-left'>Business</a>
</div>
<div class='col-md-8'>
<a href="#" class='footer-link move-right'>Settings</a>
<a href="#" class='footer-link move-right'>Terms</a>
<a href="#" class='footer-link move-right'>Privacy</a>
</div>
</div>
</div>
以下是bootstrap文档和具体化文档的链接