Question

考虑到我们连续有一堆内联块：

<div class="elements-row">
  <div class="element">January</div>
  <div class="element">February</div>
  <div class="element">March</div>
  <div class="element featured">April</div>
  <div class="element">May</div>
  <div class="element">June</div>
  <div class="element">July</div>
<div>

.elements-row {
    height: 140px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}

.elements-row .element {
    display: inline-block;
    font-size: 40px;
    color: #abb8c2;
    margin: 0 15px;
}

.elements-row .element.featured {
    margin: 0 40px;
    color: #4a667f;
}

有没有办法水平对齐行.featured块始终保持在.elements-row块的中间，无论其他元素宽度是多少（其'内容是动态的）。允许元素超出行的边界，但除.featured之外的所有元素之间的空格应该是常量。

A demo on CodePen

Answer 1

你可以这样做：

.elements-row {
    height: 140px;
    display: block;
    text-align: center;
    overflow: hidden;
}

.elements-row .element {
    display: inline-block;
    font-size: 10px;
    color: #abb8c2;
    margin: 0 15px;
}

.elements-row .element.featured {
    margin: 0 40px;
    color: #4a667f;
}

.elements-center {
    display: inline-block;
    position: relative;
}

.elements-left {
    top: 0;
    position: absolute;
    right: 100%;
    white-space: nowrap;
}

.elements-right {
    top: 0;
    position: absolute;
    left: 100%;
    white-space: nowrap;
}

<div class="elements-row">
    <div class="elements-center">
        <div class="elements-left">
            <div class="element">January</div>
            <div class="element">February</div>
            <div class="element">March</div>
        </div>
        <div class="element featured">April</div>
        <div class="elements-right">
            <div class="element">May</div>
            <div class="element">June</div>
            <div class="element">July</div>
        </div>
    </div>
</div>

同样在JSFiddle ......至少要开始。

Answer 2

使用flex也是可能的。

你可以通过拉伸窗户来检查我的意思。您可能不想使用justify-content: space-around，而是使用justify-content: space-between。

有关flex的更多信息，请访问this w3schools page。

<强>更新

这是一个带有新代码的JSFiddle，如果您想尝试调整窗口大小，它可能会更好。

.elements-row {
  display: flex;
  justify-content: space-around;
}

.element {
  font-size: 30px;
  color: #abb8c2;
  margin: 0 15px;
}

.featured {
  color: #AAA;
}

.elements-left {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.elements-right {
  display: flex;
  justify-content: flex-start;
  flex: 1;
}

<div class="elements-row">
  <div class="elements-left">
    <div class="element">lorem ipsum dolor sit amet</div>
    <div class="element">February</div>
    <div class="element">March</div>
  </div>
  <div class="element featured">April</div>
  <div class="elements-right">
    <div class="element">May</div>
    <div class="element">June</div>
    <div class="element">July</div>
  </div>
</div>

旧代码可能对其他人有用：

还指向the JSFiddle

的链接

.elements-row {
  display: flex;
  justify-content: space-around;
}

.element {
  font-size: 30px;
  color: #abb8c2;
  margin: 0 15px;
}

.featured {
  color: #AAA;
}

<div class="elements-row">
      <div class="element">January</div>
      <div class="element">February</div>
      <div class="element">March</div>
      <div class="element featured">April</div>
      <div class="element">May</div>
      <div class="element">June</div>
      <div class="element">July</div>
    </div>

通过中间元素

2 个答案: