我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为啥？
Posted
技术标签:
【中文标题】我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为啥？【英文标题】：I want to set the logo on left and links on right but float dont work on nav tag ... why?我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为什么？ 【发布时间】：2020-07-16 13:28:16 【问题描述】：我使用此代码进行导航，并使用引导程序进行练习
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>welcome to your site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/mehrlogo.png" ></a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
如何在右侧或左侧设置徽标，在另一侧设置链接？
默认情况下，链接和徽标彼此靠近，向左或向右浮动不起作用 - 我该怎么办？
【问题讨论】：
【参考方案1】：.navbar 使用display: flex 定位其元素。这意味着您可以通过在.navbar 上更改flex-direction 和justify-content 来重新定位或排列它们，但还要注意flex-grow、flex-shrink、flex-basis 以及在@987654330 的每个直接子级上设置的左右边距@。
从左到右开始flex-direction: row（默认）。
从右到左：flex-direction: row-reverse。
在重新排列它们之间和周围的空间方面，对于上述任何一种，将justify-content 更改为space-between（默认）、space-evenly、flex-end、flex-start、center 中的任何一个.
这是一个以相反顺序和均匀间隔排列的示例：
nav.navbar
flex-direction: row-reverse;
justify-content: space-evenly;
div.navbar-collapse
flex-grow: 0;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">LOGO HERE</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>注意事项：在父级或任何子级上设置的更多属性会影响其显示行为。一些最常见的：
在任何孩子身上设置margin: auto 会偷走所有积极的空间并将其留给那个特定的间隙，使justify-content 看起来好像不起作用。它正在工作，但它的分布正好是0 空间。如果您想将可用空间划分为几个选定的间隙，请使用任何相邻元素在每个间隙中放置一个margin:auto。
在任何子节点上设置flex-grow、flex-shrink 或flex-basis 都会影响它们的大小，从而影响可用空间的分布。这里需要注意的是，默认情况下，在某些响应时间间隔内，.navbar-collapse 具有 flex-grow: 1，因此您需要将其设置为 0 才能重新分配可用空间。否则没有可用空间。
【讨论】：
当我使用反向时，该属性设置了我想要的徽标和链接的距离，但是当该属性默认为它们之间没有距离并且它们彼此靠近时，你知道我在说什么? 如您所见，它在这里工作。如果它在您的情况下不起作用，您正在使用您的问题中未包含的其他 CSS。如果不知道额外的 CSS 是什么，任何人都无法提供帮助。 当使用该属性时，整个事情都会移动，但现在我想将链接设置到浏览器的右侧，并且徽标在正确的位置，我没有写任何外部 css @hossein，如果我看不到它，我就无法接受。提出minimal reproducible example 实际重现问题。您提供的代码无法重现您所描述的内容。【参考方案2】：最好使用这个： 如果您想将链接（或其他元素）放在右侧，请将 ml-auto 类添加到您的元素；如果你想把它放在左边，添加 mr-auto 类到你的元素。
【讨论】：
以上是关于我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为啥？的主要内容，如果未能解决你的问题，请参考以下文章