对齐导航栏的<ul>

Question

这就是我正在处理的网站的导航栏如何显示在左边：

但我想将导航栏移到屏幕右侧，使“编辑”对着屏幕的右边框。我必须对以下的CSS / HTML代码进行哪些更改？

CSS导航栏代码

.navbar-inverse {
  background-color: transparent;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  background-color: #FF0346;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #FF0346;
}
.dropdown-menu {
  background-color: #FFFFFF
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #FF0346
}
.navbar-inverse {
  background-image: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-image: none;
}
.navbar-inverse {
  border-color: transparent;
}
.navbar-inverse .navbar-brand {
  color: #A6A6A6
}
.navbar-inverse .navbar-brand:hover {
  color: #0D0D0D
}
.navbar-inverse .navbar-nav>li>a {
  color: #000000;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  color: #FFFFFF
}
.dropdown-menu>li>a {
  color: #333333
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-top-color: #999999
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-top-color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-bottom-color: #999999
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #FFFFFF
}

<!-- begin snippet: js hide: false -->

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header" float>
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.php" class="navbar-brand"><img src='dummylogo.png' width="100" height="100" alt="HEG Logo"></a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.php">Home</a>
        </li>
				
        <li>
          <a href="gameprojects.php">Game Projects</a>
        </li>
        <li  >
          <a href="hardware.php">Hardware</a>
        </li>
        <li>
          <a href="wvm.php">Written & Visual</a>
        </li>
<li class="active">
          <a href="twitchcorner.php">Twitch Corner</a>
        </li>
<li>
          <a href="Community.php">Community</a>
        </li>
<li>
        <a href="editorial.php">Editorial</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Answer 1

只需将navbar-nav类浮动到右侧即可。

HTML：

<ul class="navbar-nav">...</ul>

CSS：

.navbar-nav {
   float: right;
}

看起来你正在使用类名中的Bootstrap。正如sourRaspberri的评论中指出的那样，你应该清除浮动。 Bootstrap包含clearfix。结束</ul>后添加此HTML：

<div class="clearfix"></div>