如何根据父级的大小对下拉列表进行居中

Question

我有一个下拉组件，当你点击按钮和下拉显示。我希望下拉菜单上的三角形总是指向打开它的按钮的中心，而不管它有多大。这有可能使用css吗？

在下面的例子中，我使用css-变量来实现这一点。但是在我的实际场景中，我无法做到这一点，因为容器/按钮的宽度取决于它的内容。

是否可以以任何其他方式引用容器的宽度？我看到在左定位中使用的百分比和转换是基于菜单的宽度它自己。所以这没什么用。

​

body {
  margin: 2rem 50%;
  --button-size: 100px;
}

.container {
  position: absolute;
  display: inline-block;
}
.button {
  position: relative;
  width: var(--button-size);
  border: 1px solid black;
}
.button:after {
  display: block;
  position: absolute;
  content: "";
  width: 1px;
  height: 200%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: red;
}

.item {
  white-space: pre;
  padding: 1rem;
}
.item + .item {
  border-top: 1px solid black;
}

.menu {
  padding: 0;
  list-style: none;
  position: absolute;
  border-radius: 4px;
  border: 1px solid black;
  left: 100%;
  transform: translateX(calc(-75% - var(--button-size)/2));
}
.menu:after,
.menu:before {
  content: "";
  position: absolute;
  left: 75%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: transparent;
}

.menu:before {
  border-bottom-color: black;
  top: -17px;
}

.menu:after {
  border-bottom-color: white;
  top: -16px;
}

<div class="container">
  <div class="button">Centered on me(but using css-variables)</div>
  <ul class="menu">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

​

Answer 1

我认为对中心所需的元素使用margin: auto;可能很有用，因为它会根据在任何给定情况下可用的空间自动调整和放置它的元素。