Question

虽然这看起来像是一个非常愚蠢的问题，但我一直难以让其中一个项目坚持到右边。到目前为止，我有几个项目，我希望“注销”按钮坚持到右侧。

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
  float: left;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 25px;
  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  margin-left: -90%;
}

<header>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
        <div class="logout">
          <li><a href="#">Logout</a></li>
        </div>
      </ul>
    </nav>
  </div>
</header>

我认为可以使用的贫民窟式解决方案是创建一个名为“logout”的div，然后在main.css文件中添加float: right;到.logout。事实上，这不起作用，只是让事情变得更糟。

Answer 1

只需更改nav宽度并添加float:right;

即可

就像那样：

nav {
  float: left;
  width:100%
}

Fiddle

Answer 2

你的css和html代码中只有一些错误。尝试使用此代码来获得所需的结果。

<header>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
        <li class="logout"><a href="#">Logout</a></li>
      </ul>
    </nav>
  </div>
</header>

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

nav li {
  display: inline-block;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  padding: 20px 0;
  margin: 0 30px;
  position: relative;
  display: block;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
  left: 0;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  float: right;
}

Answer 3

浮动元素需要位于将环绕它们的元素之前。我不确定您在margin-left: -90%上使用.logout尝试做什么;当您尝试添加float时，这就是干扰。去掉它。没有必要将元素包装在div中，您只需将类名直接放在li上即可。最后，float:left nav正在折叠导航元素的宽度;你可以删除它，它会自动填充窗口宽度（添加width: 100%将是无害的但是多余的。）

（你仍然需要添加一些媒体查询来处理没有足够的空间让所有元素都适合一行的情况，但这不是问题，它有几种不同的方式可以解决，所以我不会在这里解决它）

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 25px;
  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  float: right;
}

<header>
  <div class="container">
    <nav>
      <ul>
        <li class="logout"><a href="#">Logout</a></li>

        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
      </ul>
    </nav>
  </div>
</header>

使一个项目浮动到右侧

3 个答案: