为什么我的注销 link 超出了屏幕边缘？

Question

我正在尝试将导航 link 右对齐到我的 header 部分的右侧。所以我创建了

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">My Subscriptions</a></li>
            <li><a href="#">Help</a></li>
            <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
          </ul>

并添加了这种风格

header ul {
  float: right;
  list-style: none;
}

header ul li {
  float: left;
  margin-left: 15px;
}

但是我的注销 link 超出了屏幕边缘 — https://jsfiddle.net/p2rwgfjc/。我怎样才能修改它以使所有文本都保留在屏幕上？

Answer 1

只需将 margin-right: 15px 添加到您的 header ul。

header ul {
  float: right;
  list-style: none;
  margin-right: 15px;
}

Fiddle: https://jsfiddle.net/og165aky/

Answer 2

我认为当你浮动某些东西时，你必须也浮动它的父元素，否则你浮动的元素离开其他 html 元素结构并成为一个单独的元素浮动。

所以浮动父元素，给它一个none的浮动，或者继承。

Answer 3

原因是block的宽度包含了默认的padding，而你设置了header的100%宽度，所以header的总宽度大于100%，超出了屏幕的边缘。所以你应该清除块的默认边距和填充。最方便的方法是通过 * {padding: 0, margin: 0}。希望这个回答能帮到您！

Answer 4

忘记浮动。
注意包装宽度。
在包装器上使用 flex。
在您的 UL 上使用 flex。

header{
    box-shadow: none;
    background: #44505d;
    border-bottom: none;
    height: 73px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

.wrapperLogo{
width:30%;}

header nav{
width:70%;}


#logo {
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}


#logo:hover {
  color: #fff;
  text-decoration: none;
}

header ul {
  list-style: none;
  display:flex;
  justify-content:space-around;
}

<header id="branding" class="clearFix">
  <div class="wrapperLogo">
    <a id="logo" href="#">sample app</a>
  </div>
 <nav>
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">My Subscriptions</a></li>
    <li><a href="#">Help</a></li>
    <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
   </ul>
 </nav>
</header>

当然不完美。您还需要修改移动视图。像字体和宽度和高度。等等

看看这个

 header ul {
      list-style: none;
      display:flex;
      justify-content:space-around;
    }

你可以修改它而不证明内容或者你也可以删除它并用你以前的css header ul li {margin-left:15px}

为什么我的注销 link 超出了屏幕边缘？

Why is my log out link going off the edge of the screen?

css

header

stylesheet

html-lists

display