html - 如何使导航左对齐？

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 变换 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;
  }
}