css - 对齐导航栏的 <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 类 float 到右侧即可。

HTML:

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

CSS:

.navbar-nav {
   float: right;
}

从类名来看，您似乎正在使用 Bootstrap。正如 sourRaspberri 在评论中指出的那样，您应该清除 float 。 Bootstrap 包含一个 clearfix。收盘后</ul>添加此 HTML:

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