Html Flexbox-在同一条线上左右对齐_Html_Css_Navbar_Flexbox

Html Flexbox-在同一条线上左右对齐

html css

Html Flexbox-在同一条线上左右对齐,html,css,navbar,flexbox,Html,Css,Navbar,Flexbox,情况： <nav> <ul class="primary-nav"> <li><a href="#" id="item1">ListItem1</a></li> <li><a href="#" id="item2">ListItem2</a></li> <li><a href="#" id="item3">ListItem3&

情况：

<nav>
  <ul class="primary-nav">
    <li><a href="#" id="item1">ListItem1</a></li>
    <li><a href="#" id="item2">ListItem2</a></li>
    <li><a href="#" id="item3">ListItem3</a></li>
    <li><a href="#" id="item4">ListItem4</a></li>
  </ul>
</nav>

我有一个简单的导航栏，我正在Flexbox中构建。我想将一个项目浮动到左侧，并将其他项目固定到右侧

示例：

<nav>
  <ul class="primary-nav">
    <li><a href="#" id="item1">ListItem1</a></li>
    <li><a href="#" id="item2">ListItem2</a></li>
    <li><a href="#" id="item3">ListItem3</a></li>
    <li><a href="#" id="item4">ListItem4</a></li>
  </ul>
</nav>

赞扬并感谢任何拥有Flexbox技能并能帮助我正确处理这种情况的人。：）

如果您希望左侧只有一个元素，右侧所有其他元素，最简单的解决方案是在父元素上使用

justify content:flex end

将所有元素向右移动，然后将

margin right:auto

添加到您希望左侧的元素中

。主导航{
显示：-webkit flex；
显示器：flex；
列表样式类型：无；
填充：0；
证明内容：柔性端；
}
.左{
右边距：自动；
}

您可以在正确的位置插入伪元素，并使其增长以填充可用空间

。主导航：：之后{
内容：''；
柔性生长：1；
顺序：0；
}
.对{
顺序：1；
}

。主导航{
显示器：flex；
列表样式类型：无；
填充：0；
}
.主导航：：之后{
内容：''；
柔性生长：1；
顺序：0；
}
.对{
顺序：1；
}
.左，.右{
边框：1px实心；
填充：0 5px；
}


左1
右侧1
右侧2
右侧3


左1
左2
右侧1
右侧2


左1
左2
左3
右侧1


左1
右侧1
左2
右侧2
左3
右侧3

这里是mmgross解决方案的一种更简洁的CSS形式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.container {
    display:flex;
    list-style-type:none;
    padding:0;
}

.container > li:first-child {
    margin-right:auto;
}

td { border:1px black solid } /* for debug */
</style>
</head>
<body>
<table>
<tr><td colspan=2>
  <ul class="container">
    <li>leftitem</li>
    <li>rightitem</li>
  </ul>
<tr><td>otherotherotherother<td>otherotherotherother
</table>


.集装箱{
显示器：flex；
列表样式类型：无；
填充：0；
}
.container>li:第一个孩子{
右边距：自动；
}
td{border:1px黑色固体}/*用于调试*/

左项
右项

其他其他其他其他其他

屈服：

小提琴：。忽略-这是由于。代码是有效的

不需要边距黑客或伪元素

只需在flex容器中创建一个分区，并使flex容器通过之间的空间对齐

在第一个分区内，您将项目放在左侧，在第二个分区内，您将项目放在右侧

nav.menu{
显示器：flex；
证明内容：之间的空间；
}
导航菜单{
保证金：0；
填充：0；
列表样式：无；
}
导航菜单{
显示：内联块；
}

太棒了，看起来不错！如果我们将其扩展到两个项目，向左浮动是不是解决方案要复杂得多？这在IE v10中不起作用。尝试删除行

justify content:flex end，然后它将在所有浏览器中工作。这只适用于方便的情况，即您只有一个项目位于远端end@vsync如果你说的“远端”是指在左边，那么你是绝对正确的。这也是我在回答中提到的第一件事。如果你的意思是我遗漏了什么：请解释，这样我可以更新我的答案。这应该是被接受的答案。很好用！谢谢Oriol。添加宽度：100%到导航菜单{..
如果它不适合您（我使用的是…
而不是。
）