如何对齐这些语义 UI 下拉边框？

Question

我正在使用语义 UI 下拉列表，我正在尝试增加 border-width。

这是我的问题：

下拉菜单的边框和菜单的边框未对齐。我该如何解决？

您可以在此页面上重现我的问题：https://semantic-ui.com/modules/dropdown.html

只需在 div 和 ui dropdown selection active visible 类中添加一个 border-width: 2px，然后将相同的属性添加到 children div 与 menu transition visible 类.

菜单的下拉菜单大小不同，因此我尝试应用 width: calc(100% + 2px);，但这不起作用。

Answer 1

还有一些额外的 css 属性需要修改：

.ui.selection.dropdown .menu {
  margin: 0 -2px; // same amount as border width
  min-width: calc(100% + 4px); // left + right border width
  width: calc(100% + 4px); // left + right border width
}

完成后，下拉菜单看起来不错。

如何对齐这些语义 UI 下拉边框？

How to align these Semantic UI dropdown borders?

css

semantic-ui