html - CSS block 不适用于 jekyll 下拉导航栏

Question

我一直在关注 w3schools 和 this other website使用 frontmatter 在 jekyll 中构建导航栏。我在使用 CSS 中的 block 属性时遇到了问题。除了下拉部分之外，整个导航栏都在工作。

这是 jsfiddle .我不确定它会有多大用处，因为它里面有 Liquid。

这是我正在查看的图片。我玩过 CSS 的“#navbar .ddm a”部分，所以我知道我在正确的位置，但我是否放置 block 并不重要。内联工作正常。它只是默认为内联 block ，即使我删除了“显示:”

这是我认为应该是罪魁祸首的css

#navbar .ddm a {
  color: green;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

Answer 1

需要定位的元素是下拉菜单的列表项(li)。 您关注的是嵌套的 anchor 标记 (a)。因此，您需要向上查看一个级别 - 查看包含的父元素 (li)。

为了达到预期的结果，您需要删除 仅 下拉列表项上声明的 float，例如:

#navbar .dropdown-menu li { 
float: none; 
}

只要声明了 float 规则，使用 display 规则对齐元素就不会有效。

fiddle 演示 https://jsfiddle.net/kbuoL6sm/3/ (包括其他样式)