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

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

转载作者：行者123 更新时间：2023-11-28 08:31:28

24

4

这是我尝试制作的简单注册页面。我需要帮助弄清楚如何在导航栏的左侧放置 home、about、help 并在导航栏的最右侧登录。我希望它们在同一个导航栏上，但我找不到任何关于如何将它们分开或将它们放在页面的不同两侧的信息。

我是 html 和 css 的新手，所以任何其他有助于提高我的第一个网页质量的技巧都将有助于和平 SO peeps。

<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

关于html - 如何在导航栏中分隔列表的各个部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28249016/

24

4

0

文章推荐： javascript - 滚动到无限滚动后出现的 div id

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

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