Question

我正在尝试在flex项目中水平对齐两个绝对定位的元素。

这是我目前的CodePen

HTML ：

<div class="stepper-wrapper">
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
</div>

CSS ：

.stepper-wrapper {
  display: flex;
  flex-direction: row;
}
ul {
  border: 1px solid grey;
  height: 0px;
  position: relative;
  top: 40%;
  min-width: 100px;
  flex: 1;
  li.step__bubble {
    display: inline-block;
    vertical-align: middle;
  }
  li.step__bubble::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50%);
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid grey;
    border-radius: 50%;
    background: white;
  }
  li.step__circle {
    width: 8px;
    height: 8px;
    border: 1px solid red;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -4px;
    left: calc(50% + 1px);
  }
}

我想做的是：

将灰色圆圈垂直和水平对齐线。垂直不是pb，我可以设置固定值，因为.stepper-wrapper的高度将被修复。水平需要适应性，这就是我被困住的地方。
在灰色圆圈内有红色圆圈

我尝试使用calc()函数并将其设置为(50% - width_of_element_in_px/2)两个圈子，但我不知道为什么，每个px似乎都是~10px。

感谢您的帮助

Answer 1

欢迎来到calc()所示的LESS用户俱乐部和字符串插值
自从5年以来我一直在使用LESS，但它仍然不时发生:(

Sooo tl; dr calc()曾经是并且是一个LESS函数，它的编译器很乐意输出结果（可能是50％+ 10（剥离）=＆gt; 60％）。
如果您希望LESS编译器输出{3}} CSS Level 3函数，则需要escape它，将其包装在calc()中！

<强> Codepen

编辑：另见https://stackoverflow.com/a/17904128/137626
EDIT2：在LESS文档oO中找不到关于~"calc(50% + 5px)"的条目，但问题在http://lesscss.org/usage/#command-line-usage-options中解释（在文本中搜索“calc”）。 calc是一个很酷的选择，但你必须确保其他所有人都已激活它（默认情况下不是这样）

居中对齐弹性项目内的绝对元素

1 个答案: