html - 下拉 CSS 不工作(Laravel Blades)

Question

我有一个 View ，其中我正在使用一些下拉菜单，例如

Access Link

我无法显示边框底部，我尝试在该元素 CSS 中手动给出边框底部或边框定义，但无法修复。任何帮助

Answer 1

并不是说它没有底边框，而是浏览器不显示而已。

您的按钮的高度为 40 像素。但它也包含在一个高度为 40px 且 box-sizing 为 border-box 的 div 中。

基于 this , 当 border-box 与 box-sizing 一起使用时，分配给内容(在这种情况下，您的 button)的高度在考虑后会降低元素的边框和填充属性(在本例中为您的 div)。我只是不知道为什么内容似乎以覆盖容器 div 底部边框的方式呈现。

请注意，CSS 中的 box-sizing 属性应用于所有元素，包括 :before 和 :after 伪元素。

如果您执行以下任何操作，您可以解决您的问题并显示底部边框:

• 降低 button 元素的高度(例如，将 .ms-choice 设置为 38px 的高度)。
• 增加容器 div 的高度(例如设置为 42px)。这只会使您的下拉菜单与您的搜索输入错位。
• 更改容器 div 使其具有 content-box 的 box-sizing。
• 将按钮的背景颜色更改为透明，并将白色背景颜色放在 div.ms-parent.form-control 上。 (我添加此选项是为了显示 button' 实际上被渲染为覆盖包含 div 的底部边框。)