html - 如何使导航向左对齐？

试图使导航像普通段落一样向左对齐和换行。目前，当悬停时，它似乎怪异地打破了。

例：



希望实现以下内容，只有当我将鼠标悬停在某个链接上时，才能起作用。



码：

@media screen and (max-width: 1024px) {

li {
    float: left;
    padding-right: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block.
}


li a:hover {
    border-bottom: 2px solid;
    padding-bottom: 1px;
}

nav.isotope-filters ul li a:active,
nav.isotope-filters ul li a.selected {
    border-bottom: 2px solid;
    padding-bottom: 1px;
}
}

我虽然inline-block可以解决此问题，但事实并非如此。

最佳答案

float是有罪的。当没有任何要漂浮的东西时，不要使用漂浮物。并且不要将float与inline-block混合使用。浮动转换块中的所有显示。

@media screen and (max-width: 1024px) {

  li {
    padding-right: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block;
    float: none;
  }


  li a:hover {
    border-bottom: 2px solid;
    padding-bottom: 1px;
  }

  nav.isotope-filters ul li a:active,
  nav.isotope-filters ul li a.selected {
    border-bottom: 2px solid;
    padding-bottom: 1px;
  }
}

关于html - 如何使导航向左对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37438847/