Question

对于我参加的在线课程，我通过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;
      }

没有浮动：左找到

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

Answer 1

这是进行更改后的快照： snapshot of changed website code

从

中删除float:left;

 <ul class="nav">

并在登录和注册

中添加float:right;

<li class="login" style="float:right;">
<li class="register.html" style="float:right;">

Answer 2

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

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

正如你也应该注意到的那样，当你在每个单独的项目上而不是包含div时，你必须将标记中的元素定义为第一个元素，如果你想让它成为最右边的元素那么;这显然是不直观的，应该避免，因为有人落后你可能不明白发生了什么。

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

Answer 3

如果要将项目向右移动，则应使用简单的文本对齐： <li class = "login" style="text-align: right;"> 或者，如果你想使用CSS＆amp; HTML：
HTML： <li class = "login">
CSS：

.login {
text-align: right;
}

如何将CSS导航栏元素向右移动？

3 个答案: