Question

这是我尝试制作的简单注册页面。我需要帮助找出如何在导航栏的左侧放置回家，帮助，并在栏的最右侧登录。我希望它们位于相同的导航栏上，但我找不到任何关于如何将它们分开或将它们放在页面的不同侧面的内容。

我对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");
}

Answer 1

只需将此css添加到您的css代码

即可

.nav.nav-pills li:last-child{float:right}

jsfiddle

Answer 2

所以我找到了一种廉价的方法来达到同样的效果。

<html>
    <head>
        <title>Sample Home Page</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="home page.css">
    </head>

    <body>
        <nav class="navbar navbar-default">
            <div class="container-left">
                <ul class="nav navbar-nav" id="navlist">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Help</a></li>
                    <li id="sign-in-link"><a href="#">Sign in</a></li>
                </ul>
            </div>

        </nav>
    </body>
</html>

为登录链接分配一个ID，并在css中将其设置为正确。

#sign-in-link{
    position: absolute;
    left: 95%;
    margin:auto;
}

如何在导航栏中分隔列表的各个部分？

2 个答案: