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

Question

我正在使用语义UI下拉菜单，并且试图增加边框宽度。

这是我的问题：

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

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

只需在border-width: 2px类的div中添加一个ui dropdown selection active visible，然后在menu transition visible类的子div中添加相同的属性即可。

菜单的下拉菜单大小不同，因此我尝试应用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
}

执行完此操作后，下拉列表看起来会很好。