Question

我试图将4个元素放在彼此旁边，并且有一个元素可以通过flex解决方案直接浮动。

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

我一直试图找到一个非灵活的解决方案，但没有希望做出动态的事情。

要么我忽略了对此的不经意的答案，要么就是不可能。

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

感谢所有帮助：）

Answer 1

以下是一些选项，一个使用float，第二个使用绝对定位。

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

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

通过在一组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>

导航栏，除了一个向右浮动的元素外，所有内容都居中

1 个答案: