CSS内联块li元素未水平对齐

构建css水平菜单，我将填充和内联块元素应用于链接本身，这样就可以单击整个块而不仅仅是链接文本。通常我浮动我的UL nest菜单，但如果我浮动这个列表，它仍然垂直堆叠，我怀疑这是由于内联块。我宁愿不使用float，因为我看到的几个例子表明这是可以做到的，但是我没有运气让内联块或平面与css一起工作

例如：

HTML

---

通过在

上添加

显示：内联块

解决

#navigation li{
     display: inline-block;   
}

这是一本书

---

说明：即使您的元素带有

display:inline块

，

仍然占据了整行，因此不会为下一个

元素留出空间并强制它转到下一行。
是的，这是一个很好的解决方案。请注意css提琴末尾的额外括号。应该删除：-）@Cfrim谢谢你的提示，我总是忘记JSFIDLE会自动添加那个括号，然后自己添加一个。。。xD+1）我没有注意到OP使用了错误的导航拼写
#naviation ul li{…}
而不是CSS:@hr中的
#navigation ul li{…}
没有问题：）我知道你在说什么。天哪。。泰，我没有意识到我拼错了UL LI元素的导航。现在工作，很开心。
html {
  position: relative;
  min-height: 100%;
  width: 100%;
  background-color: #F9F5EA;
  color: #333;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0 0 6.25em;
}

#navigation {
  height: 6.25em;
  background-color: #212121;
  color: #fff;
  text-align: center;
  -webkit-box-shadow: 0 8px 6px -6px #333;
     -moz-box-shadow: 0 8px 6px -6px #333;
          box-shadow: 0 8px 6px -6px #333;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#naviation ul li {
}

#navigation ul li a {
  display: inline-block;
  vertical-align: top;
  height: 6.25em;
  width: 10em;
  line-height: 6.25em;
  text-decoration: none;
  color: #fff;
  transition: .3s background-color;
}

#navigation ul li a:hover {
  background-color: #DE5842;
}

#navigation ul li a:active {
  background-color: #6CBDF2;
  cursor: default;
}

#navigation li{
     display: inline-block;   
}