CSS块不适用于jekyll下拉导航栏

Question

我一直在关注w3schools和其他网站 ，使用frontmatter在jekyll中构建导航栏。 我在CSS中使用block属性遇到麻烦。 除下拉部分外，整个导航栏都在工作。

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

这是我正在看的照片。 我已经玩过CSS的“ #navbar .ddm a”部分，所以我知道我处在正确的位置，但是是否放置块并不重要。 内联正常工作。 即使我删除“ display：”，它也只是默认设置为inline-block

我认为这是CSS的元凶

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

Answer 1

需要确定目标的元素是下拉菜单的列表项（ li ）。 您关注的是嵌套的锚标记（ a ）。 因此，您需要向上看-包含父元素（ li ）。

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

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

只要声明了float规则，将元素与display规则对齐就不会生效。

小提琴示范 https://jsfiddle.net/kbuoL6sm/3/ （包括其他样式）