Question

我正在尝试将导航链接右对齐到标题部分的右侧。所以我创建了

          <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;
}

但我的退出链接正在屏幕边缘 - https://jsfiddle.net/p2rwgfjc/。如何修改它以便所有文本都保留在屏幕上？

Answer 1

原因是块的宽度包括默认填充，并且您已设置标题的100％宽度，因此标题的总宽度大于100％并且离开屏幕边缘。因此，您应该清除块的默认边距和填充。最方便的方法是* {padding：0，margin：0}。我希望这个答案可以帮到你！

Answer 2

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

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

小提琴： https://jsfiddle.net/og165aky/

Answer 3

我认为当你浮动某些内容时，你必须浮动它的父项，否则你浮动的元素将离开其他html元素结构并成为一个独立的元素浮动。

所以浮动父元素并给它一个无浮动或继承。

Answer 4

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

它不完美，当然可以。您还需要修改移动视图。喜欢字体，宽度和高度。等

看看这个

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

您可以在没有合理内容的情况下对其进行修改，也可以将其删除并使用之前的css header ul li {margin-left:15px}

为什么我的退出链接不在屏幕边缘？

4 个答案: