如何对齐除一个导航栏项目以外的所有项目，从左边距开始，固定组合的最小和最大宽度，但最后一个项目发送到右边距？
Posted
技术标签:
【中文标题】如何对齐除一个导航栏项目以外的所有项目，从左边距开始，固定组合的最小和最大宽度，但最后一个项目发送到右边距？【英文标题】：How to align all but one navbar items left, starting at left margin, with fixed combined min & max width, but with the last item sent to right margin? 【发布时间】：2017-05-24 10:18:21 【问题描述】：如何将导航栏中除一个项目之外的所有项目向左对齐，从左边距开始，并具有固定的最小和最大宽度组合，例如 300 像素和 400 像素，但最后一个项目发送到右边距？
我需要这样的结果：
目前我有四个项目和 html 和 CSS 如下：
HTML
<div id="nav">
<ul>
<li><a href="/">One</a></li>
<li><a href="/">Two</a></li>
<li><a href="/">Three</a></li>
<li><a href="/">Four</a></li>
</ul>
</div>
CSS
#nav span
display: inline-block;
position: relative;
#nav ul
text-align: justify;
max-width: 400px;
#nav ul:after
margin-left: 100%;
content: "";
#nav ul li
display: inline;
请注意，我正在使用this question 接受的答案中给出的技术来证明 400 像素最大宽度内的元素。目前 400px 内有四个元素，但我需要将第四个元素取出并发送到右侧。
【问题讨论】：
抱歉 - 我第一次输入时左右混淆了！ 【参考方案1】：您可以在ul 上使用display: flex，并将margin-left: auto 和text-align: right; 放在最后一个li 元素上。我对 li 元素设置了尺寸限制以满足您的尺寸要求，使最小 100px（300 的三分之一）和最大 133px（〜 400px 的三分之一）：
#nav ul
width: 100%;
padding: 0;
background: #ccc;
display: flex;
#nav ul li
display: inline;
box-sizing: border-box;
min-width: 100px;
max-width: 133px;
padding: 5px 10px; /* only to make it look better */
#nav ul li:last-child
margin-left: auto;
text-align: right;
<div id="nav">
<ul>
<li><a href="/">One</a></li>
<li><a href="/">Two</a></li>
<li><a href="/">Three</a></li>
<li><a href="/">Four</a></li>
</ul>
</div>浮动的替代解决方案（在评论要求非 CSS3 解决方案后）：
#nav ul
width: 100%;
padding: 0;
background-color: #ccc;
overflow: hidden;
#nav ul li
float: left;
list-style: none;
box-sizing: border-box;
min-width: 100px;
max-width: 133px;
padding: 5px 10px;
/* only to make it look better */
#nav ul li:last-child
float: right;
text-align: right;
<div id="nav">
<ul>
<li><a href="/">One</a>
</li>
<li><a href="/">Two</a>
</li>
<li><a href="/">Three</a>
</li>
<li><a href="/">Four</a>
</li>
</ul>
</div>【讨论】：
这很好用——谢谢！ - 我投了赞成票。但是有没有办法在不使用 CSS3 的情况下做到这一点？ 我添加了第二个解决方案，它使用浮动而不是弹性框。 再次感谢。这几乎是完美的，但是当我调整窗口大小时，除了最后一个元素之外的元素的宽度没有从 100 像素调整到 133 像素。它们是固定的，每个占用 100 像素。 （FF50，IE11。）这对我的目的来说是可以接受的，但我发表此评论是为了其他可能阅读此答案的人的利益。 但是你必须定义它们与整体宽度之间的关系应该如何，即在什么情况下它们会达到 133px 以及在什么（宽度）下它们会被压缩到 100px。使用百分比宽度与现有的最小/最大像素宽度相结合，应该可以实现类似的效果。【参考方案2】：希望对你有帮助
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">One</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Two<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Two 1-1</a></li>
<li><a href="#">Two 1-2</a></li>
<li><a href="#">Two 1-3</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Four</a></li>
</ul>
</div>
</nav>
</body>
</html>
注意：点击整页查看
【讨论】：
谢谢，但我没有使用 Bootstrap。我需要前三个项目以 400 像素的固定组合宽度展开，向左浮动。这适用于我发布的代码，除了所有四个项目都在该宽度内展开，而我需要取出第四个并向右推，前三个的组合宽度为 400 像素。【参考方案3】：#nav
background: #F9F9F9;
#nav ul
list-style: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
#nav li
display: table-cell;
width: 60px;
text-align: center;
border: 1px solid #CCC;
#nav li:last-child
width: auto;
text-align: right;
#nav a
display: inline-block;
padding: 7px;
<div id="nav">
<ul>
<li><a href="/">One</a></li>
<li><a href="/">Two</a></li>
<li><a href="/">Three</a></li>
<li><a href="/">Four</a></li>
</ul>
</div>【讨论】：
谢谢，但我需要一个 400 像素的固定组合宽度，以便将所有项目放在一起，而没有发送到右侧的项目。 再次感谢，但这不会将第四项发送到右侧。它保持在 400 像素以内。【参考方案4】：Codepen
你的意思是这样的吗？
试试这个代码，保持你的标记不变。
#nav ul
text-align: justify;
max-width: 400px;
float:left;
display:block;
position:relative;
#nav ul li
display:inline-block;
float:left;
#nav ul li a
text-decoration:none;
color:#242424;
#nav ul li:last-of-type
position:absolute;
right:-1200px;
#nav ul
text-align: justify;
max-width: 400px;
float:left;
display:block;
position:relative;
#nav ul li
display:inline-block;
float:left;
#nav ul li a
text-decoration:none;
color:#242424;
#nav ul li:last-of-type
position:absolute;
right:-1200px;
【讨论】：
在 Codepen 中，将前三个项目压缩在一起。在我自己的 CSS 中，如果我用这个替换我发布的片段，它会造成严重破坏！我已编辑问题以使其更清楚。以上是关于如何对齐除一个导航栏项目以外的所有项目，从左边距开始，固定组合的最小和最大宽度，但最后一个项目发送到右边距？的主要内容，如果未能解决你的问题，请参考以下文章