如何使导航对齐？

Question

尝试使导航左对齐和换行符像普通段落一样。目前它在徘徊时似乎有点奇怪。

示例：

希望实现以下功能，只有当我将鼠标悬停在某个链接上时才能正常工作。

代码：

@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会解决这个问题，但事实并非如此。

Answer 1

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

@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;
  }
}