导航栏，所有内容居中，但一个元素向右浮动

Question

我试图将4个元素彼此并排居中，并使用flex解决方案浮动一个元素。

最好的结果是，如果我在哪里调整浏览器的大小，浮动对象将保持原样，而这4个元素将占据所有其余元素，直到没有剩余空间。

我一直试图找到一种不灵活的解决方案，而没有希望做动态的事情。

我可能忽略了对此的遗忘答案，或者这是不可能的。

我可以完成代码调整，甚至可以添加JS / JQuery解决方案-我真的不介意。

感谢所有帮助:)

Answer 1

这里有两个选项，一个使用浮点，另一个使用绝对定位。

在第一种情况下，居中考虑浮动元素的宽度。

在第二种情况下，居中相对于父元素的宽度。

通过使用text-align: center来实现居中text-align: center以一组inline-block子元素为中心。

 .nav { padding: 0; margin: 0; overflow: auto; text-align: center; border: 1px dotted blue; position: relative; } .nav li { display: inline-block; border: 1px dotted blue; } .rightfloat { float: right; } .rightpos { position: absolute; right: 0; } 

 <p>Ex 1:</p> <ul class="nav"> <li class="rightfloat">Right Most</li> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> <p>Ex 2:</p> <ul class="nav"> <li class="rightpos">Right Most</li> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul>