ナビゲーションを左に揃えるにはどうしたらいいですか？

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を混用しないでください。ブロック内のすべてのディスプレイをフロート変換します。

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