这是我尝试制作的简单注册页面。我需要帮助，弄清楚如何在导航栏的左侧放回家，并在栏的最右侧登录。我希望它们在同一导航栏上，但是我找不到如何分离它们或将它们放在页面的不同面上的任何信息。
我是html和CSS的新手，因此任何其他可以帮助改善我的第一个网页质量的技巧都可以帮助您和平共处。
<html>
<head>
<title> Sample Sign up App</title>
<script></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="sign up form css.css">
</head>
<body>
<nav class="nav navbar-left">
<div class="nav">
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role ="presentation"><a href="#">Sign in</a></li>
</ul>
</div>
</nav>
<div class ="container">
<div class = "jumbotron">
<h2 id="jumbo-welcome"> Sign up to Sample App today!</h2>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputFile">Username</label>
<input type="text" class="form-control" id="exampleInputFile" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<br>
<button type="submit" class="btn btn-default" id = "submit-button">Sign up</button>
</form>
</div>
</div>
</body>
</html>
页面的CSS
nav {
margin: auto;
width: 1980px;
height:45px;
.border;
.shadow;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav2 li{
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.jumbotron{
display:block;
position:fixed;
width:40%;
height:66%;
top: 20%;
margin-left:20%;
margin-right:auto;
}
.form-group{
display:block;
margin-left: 15%;
margin-right:15%;
}
.jumbotron #submit-button{
display:block;
margin-left:40%;
margin-right:35%;
}
#jumbo-welcome{
text-align:center;
}
body {
line-height: 1;
background:#F2F2F2;
background-image: url("http://tech-rx.com/wp-content/uploads/2014/05/background.jpg");
}
最佳答案
只需将此CSS添加到您的CSS代码中
.nav.nav-pills li:last-child{float:right}
jsfiddle