Question

CSS专家！首先，如果这似乎是一个重复的话，请大声道歉！

我有一组带文字的按钮，我想水平排列。出于这个原因，我使用div和display: "flex"将它们作为子项包围起来。每个按钮的基本布局如下：

<div>
    <div style={normalStyle}>
        <div style={lineStyle}/>
        <div style={circleStyle}>
            <div style={onButtonStyle}/>
        </div>
    </div>
    {children}
</div>

我使用的样式的最小化版本如下：

{
    normalStyle: {
        position: "relative",
        cursor: "pointer",
    },

    lineStyle: {
        position: "absolute",
        left: 0,
        top: "10px",
        height: "15px",
        width: "38px",
    },

    circleStyle: {
        position: "absolute",
        left: 0,
        top: 7,
        height: "20px",
        width: "20px",
    },

    onButtonStyle: {
        position: "absolute",
        left: 0,
        top: 0,
        height: "20px",
        width: "20px",
    }
}

目标是实现某种材质按钮，其中我有一个滑块（带lineStyle）和一个基圆（带circleStyle）和一个叠加按钮圈（带onButtonStyle }）根据检查的按钮状态进行扩展或缩小（为简单起见，此处未显示transition样式）。

看来文本（children）不尊重按钮，因此它们重叠，我怀疑它与absolute定位有关。此外，当我想要水平放置多个这些按钮时，它们看起来像这样：

文本显然是水平对齐的（正如预期的那样），但按钮再次以absolute方式定位w.r.t.孩子的文字。

<div style={{ display: "flex" }}>
   <Button>A toggle button</Button>
   <Button>A toggle button</Button>

我四处搜索并坦率地得到了许多解决方案，但到目前为止，我还是没能完成这项工作。真的很感激，如果有人能够对此有所了解。提前谢谢！

Answer 1

我不太确定我理解你的问题.. 为了清楚起见，我带了你的代码并清理了它+变成了简单的HTML和CSS。

第一件事.toggleStyle需要一个明确的大小，让孩子们绝对定位，父母在技术上是不可见的。这就是文本重叠ur div的原因。我使用flexbox使元素彼此相邻。如果您愿意，可以使用固定宽度的div和浮点数。

最后，onButtonStyle不应该是绝对定位的，因为这样做对于它在嵌套中找到的第一个亲戚来说是绝对的，并且不会坐在它里面。父节点。

<div class="container">
  <div class="toggleStyle">
    <div class="lineStyle"></div>
    <div class="circleStyle">
      <div class="onButtonStyle"></div>
    </div>
  </div>
  <!--  this is where you will add you {children}  -->
  <label class="textStyle">Button Text</label>
</div>

和CSS

.container {
  display: flex;
  margin: 10px;
}
.toggleStyle {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 20px;
}

.lineStyle {
  position: absolute;
  left: 0;
  top: 5px;
  height: 10px;
  width: 40px;
  border-radius: 20px;
  background-color: red;
}

.circleStyle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: blue;
}

.onButtonStyle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: yellow;
}

.textStyle {
  line-height: 20px;
  margin: 0 5px;
  font-weight: bold;
}

我为你做了Pen。

我希望很清楚！

水平对齐DIV与绝对定位的孩子

1 个答案: