有什么方法可以使展开的 <details> 元素与其父 <summary> 元素水平居中吗？

Question

我正在尝试使用

<details>

元素向我的导航栏添加下拉菜单，因为这是一种非常好的、干净的方法，无需求助于 JavaScript。

一切都按预期工作，但我想将下拉选项设置为在它们周围有一点边框（从而填充），因为否则文本会漂浮在我的网站内容上，看起来会很不一样。然而，在这样做时，我遇到了这样的问题：展开的

<details>

元素始终与其父

<summary>

元素保持左对齐，这意味着下拉项仅向右展开，看起来不太好。

这是一个最小的例子：

.nav-item {
  padding: 10px;
}

.navbar-nav {
  display: flex;
}

.navbar-nav a {
  text-decoration: none;
}

.navbar-nav a:hover {
  color: #94add7;
}

.dropdownText:hover {
  color: #94add7;
}

.dropdownItem {
  /* display: none; */
  /* width: 100px; */
  position: absolute;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid black;
}

.dropdownText {
  cursor: pointer;
}

.dropdownToggle details>summary {
  list-style: none;
}

.dropdownToggle details>summary::-webkit-details-marker {
  display: none;
}

<div class="navbar-nav">
  <div class="nav-item">
    <a class="nav-link">Link 1</a>
  </div>

  <div class="nav-item">
    <a class="nav-link">Link 2</a>
  </div>
  <div class="nav-item">
    <a class="nav-link">Link 3</a>
  </div>
  <div class="nav-item">●</div>
  <div class="nav-item">
    <div class="dropdownToggle">
      <details>
        <summary class="dropdownText">Dropdown Toggle</summary>
        <div class="dropdownItem">
          <a href="{targetUrl}">Dropdown Item with longer name</a>
        </div>
      </details>
    </div>
  </div>
</div>

有没有办法让

<details>

元素在宽度不同时以父

<summary>

元素为中心水平展开？

请注意：我之前为每个导航栏项目使用

<ul>

而不是

<div>

元素，但在尝试了很多事情之后，我考虑了

<div>

方法可能会让它们更容易对齐......至今无济于事。意思是，我没有偏好，只要有效，我就可以接受任何一种方法。

Answer 1

将 .dropdownItem 设置为左侧 50%，并使用 translateX(-50%) 将其居中。

为此，您需要将 .dropdownToggle 位置设置为相对位置。

请参阅我在 CSS 中的编辑注释以进行具体编辑。

.nav-item {
  padding: 10px;
}

.navbar-nav {
  display: flex;
}

.navbar-nav a {
  text-decoration: none;
}

.navbar-nav a:hover {
  color: #94add7;
}

.dropdownText:hover {
  color: #94add7;
}

.dropdownItem {
  /* display: none; */
  /* width: 100px; */
  position: absolute;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid black;
  
  /* EDIT Added */
  width: max-content;
  transform: translateX(-50%);
  left: 50%;
}

/* EDIT Added */
.dropdownToggle {
  position: relative;
}

.dropdownText {
  cursor: pointer;
}

.dropdownToggle details>summary {
  list-style: none;
}

.dropdownToggle details>summary::-webkit-details-marker {
  display: none;
}

<div class="navbar-nav">
  <div class="nav-item">
    <a class="nav-link">Link 1</a>
  </div>

  <div class="nav-item">
    <a class="nav-link">Link 2</a>
  </div>
  <div class="nav-item">
    <a class="nav-link">Link 3</a>
  </div>
  <div class="nav-item">●</div>
  <div class="nav-item">
    <div class="dropdownToggle">
      <details>
        <summary class="dropdownText">Dropdown Toggle</summary>
        <div class="dropdownItem">
          <a href="{targetUrl}">Dropdown Item with longer name</a>
        </div>
      </details>
    </div>
  </div>
</div>