Html 如何使下拉列表的大小与按钮（宽度）相同

我有一个下拉列表和一个按钮，我该如何使下拉列表与按钮大小相同

：根{ -navbarbgc:rgb83,79,79； -dropwidth:100px； } 身体{ 保证金：0； } 保险商实验室{ 列表样式：无； } navbar先生{ 背景色：var navbarbgc； } .navbar>ul>li>按钮{ 宽度：宽度； } 导航台{ 位置：绝对位置； 背景色：var navbarbgc； 证明内容：中心； } 下拉列表 选择1 选择2 选择3 选择4 选择5 选择6 选择7 我所做的

将类按钮li添加到具有按钮的li元素中

并添加了这个css

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
  padding: 0;
  width: 100%;
}

.button-li {
  display: inline-block;
  position: relative;
}

摆弄我所做的事

将类按钮li添加到具有按钮的li元素中

并添加了这个css

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
  padding: 0;
  width: 100%;
}

.button-li {
  display: inline-block;
  position: relative;
}

Fiddle

这里我给了按钮100px的宽度，去掉了navdrop的填充，给了navdrop与按钮相同的100px的宽度，然后我使用文本对齐将文本居中。您不应该使用justify内容，因为它现在对您没有任何帮助。使用Flex调整内容

#navdrop {
    position: absolute;
    background-color: var(--navbarbgc);
    width: 100px;
    padding-left: 0px;
    text-align: center;
}
#navdropbutton {
  width: 100px;  
}

小提琴：

这里我给了按钮100px的宽度，去掉了navdrop的填充，给了navdrop与按钮相同的100px的宽度，然后我使用文本对齐将文本居中。您不应该使用justify内容，因为它现在对您没有任何帮助。使用Flex调整内容

#navdrop {
    position: absolute;
    background-color: var(--navbarbgc);
    width: 100px;
    padding-left: 0px;
    text-align: center;
}
#navdropbutton {
  width: 100px;  
}

小提琴：

---

我使用的一个小提示可能不是最有效的方法，但我曾经在chrome中使用inspect elements并选择要调整大小的项目。从那里我可以编辑css或者使用style=@GamzXT查看JSFIDLE。从CSS中我可以看到，由于标签上的填充内联开始，它们的大小不同。你可以改变这一点，然后像你说的那样创建一个相同大小的变量，并将其应用于按钮和下拉项。我使用的一个小提示可能不是最有效的方法，但我使用chrome中的inspect元素并选择我想要调整大小的项。从那里我可以编辑css或者使用style=@GamzXT查看JSFIDLE。从CSS中我可以看到，由于标签上的填充内联开始，它们的大小不同。你可以改变这个，然后像你说的那样创建一个相同大小的变量，并将其应用于按钮和下拉项。