2

对于我正在参加的在线课程，我通过 heroku 创建了一个网络应用程序

这是网站：http ://sportmem.herokuapp.com/#

在顶部，我有一个导航栏，其中包含主页、关于、常见问题、联系方式、登录和注册等元素

我想将登录和注册元素移动到导航栏的右侧，以便登录下拉菜单看起来更好

这是我尝试过的代码

<div class = "navbar navbar-inverse navbar-fixed-top">
    <div class = "navbar-inner">
      <div class = "container">
        <button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
        </button>
        <a class = "brand" href = "#"><span class = "SportMem-sport">Sport</span><span class = "SportMem-mem">Mem</span></a>
        <div class = "nav-collapse collapse">
          <ul class = "nav">
            <li class = "active"><a href = "#">Home</a></li>
            <li><a href = "/about">About</a></li>
        <li><a href = "/faq">FAQs</a></li>
            <li><a href = "/contact">Contact</a></li>
        <li class = "login">
          <a id = "login-start" href = "#">
         Login<span></span>
          </a>
          <div id = "login-form">
        <form>
          <fieldset id = "inputs">
            <input id = "username" type = "email" name = "Email" placeholder = "Email Address" required>
            <input id = "password" type = "password" name = "Password" placeholder = "Password" required>
                  </fieldset>
          <fieldset id = "actions">
            <input type = "submit" id = "submit" value = "Log-in">
            <label><input type = "checkbox" checked = "checked"> Keep me logged-on</label>
                  </fieldset>
                </form>
              </div>
        </li>
        <li class = "register.html"><a href = "#register">Register</a></li>
          </ul>
          </div>
      </div>
    </div>

我尝试将元素浮动到右侧，但我尝试过的没有任何效果

有人可以帮我找到解决方案吗？

非常感谢帮助

编辑：如果您想知道，这是整个 CSS 代码

<style type = "text/css">
      @media (min-width: 980px) {
        body {
          padding-top: 60px;
        }
        .linediv-l {
          border-right: 3px #DAA520 solid;
        }
        .linediv-r {
          border-left: 3px #DAA520 solid;
        }
      }

      @media (max-width: 480px) {
        .copy {
          padding: 2.5% 10%;
        }
        .linediv-l {
          border-bottom: 3px #DAA520 solid;
        }
        .linediv-r {
          border-top: 3px #DAA520 solid;
        }
      } 

      a:hover {
        text-decoration: none;
        color: gold;
      }

      a:link {
        text-decoration: none;
        color: black;
      }

      a:visited {
        text-decoration: none;
        color: black;
      }

     .navbar {
        position: fixed;
      }

      #login-form {
        display:none;
        position: absolute;
      }

      ul > li {
        display: inline;
        color: white;
      }

      body {
        background-color: #A52A2A;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
      }

      .heading, .subheading {
        font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
        text-align: center;
      }

      .brand {
        display: inline;
      }

      .SportMem-sport {
        color:#DAA520;
      }

      .SportMem-mem {
        color: #32CD32;
      }

      .subheading {
        font-style: italic;
        font-size: 12px;
      }

      p.lead {
        padding-top: 1.5%;
        line-height: 30px;
      }

      p {
        font-size: 18px;
        line-height: 24px;
      }

      .pitch {
        padding: 2.5% 0%;
      }

      .order {
        padding: 2% 0%;
      }

      .actions {
        background-color: #343434;
        padding: 3% 0%;
        border: 5px solid #00008B;
      }

      .actions:hover {
        border: 5px solid #4B0082;
      }

      img {
        border: 5px solid #006400;
      }

      img:hover {
        border: 5px solid #DAA520;
      }

      .video, .thermometer, .order, .social, .statistics {
        text-align: center;
      }

      .statistics h3, .statistics p {
        color: white;
      }

      .copy {
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        text-align: justify;
      } 

      .asset {
        padding: 2.5% 0%;
      }

      h3 {
        text-align: center;
        color: #FFD700;
        text-shadow: 2px 2px #00008B;
      }

      h3:hover {
        color: #20B2AA;
        text-shadow: 2px 2px #F8F8FF;
      }

      .footer li {
        color: #cccccc;
        text-align: center;
        display: inline;
      }

      div.addthis_toolbox {
        width:180px;
        margin: 0 auto;
      }

没有浮动：找到左侧

不知道那个人是怎么想出来的

4

3 回答 3

3

这是更改后的快照： 更改网站代码的快照

float:left; 从中删除

 <ul class="nav">

并添加float:right;登录和注册

<li class="login" style="float:right;">
<li class="register.html" style="float:right;">
于 2013-09-12T04:52:22.633 回答
1

在 Bootstrap 的上下文中，之前的所有答案都是错误的。有专门navbar-left和navbar-right处理这种情况。您不应该尝试自己左右浮动元素，您应该使用提供的类。

您看到元素之间没有空格的原因是，当您将浮动应用于多个项目并且它们最终彼此相邻时，浮动时会忽略任何边距。保持这些边距的唯一方法是将项目放入包含 div 并浮动该 div，这就是 Bootstrap 框架提供navbar-left和navbar-right.

您还应该注意到，当您在每个单独的项目上浮动而不是包含 div 时，如果您希望它成为最右边的元素，则必须将标记中的元素定义为第一个元素；这显然是不直观的，应该避免，因为后面有人可能不明白发生了什么。

我知道这已经晚了 3 年，但我觉得需要指出正确的指示。Bootstrap 的网站上有如何构建导航栏的示例：http: //getbootstrap.com/components/#navbar

于 2017-01-27T15:31:13.967 回答
0

如果你想将项目向右移动，一个简单的文本对齐应该可以工作： <li class = "login" style="text-align: right;"> 或者，如果你想使用 CSS 和 HTML：
HTML： <li class = "login">
CSS： 

.login {
text-align: right;
}
于 2013-09-12T02:39:48.583 回答