css - CSS アンカー テキストが並んでいない

Question

これは私のサイトです: http://www.michelepierri.it/

テーマは FF と IE で正しく表示されますが、Chrome メニューの音声で開くと、正しく視覚化されません。

この問題を解決するのを手伝ってもらえますか?

Answer 1

CSS を確認したところ、未使用のスタイルが多すぎることがわかりました。それらを削除して、次のルールを使用してください。

.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}

その変更を行った後、添付ファイルを参照してください。

私も同じバージョンを使用していますが、私にとっては問題ありません

Answer 2

メニュー オプションでテキストが折り返されないようにする

すべてのテキストが同じ行に収まるように、メニュー リンクの CSS にスタイル ルールを追加します。

.menu a {
    border-left: 1px solid #585858;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    margin: 0;
    padding: 0 0.9em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px #242424;

    white-space: nowrap; /* THIS ONE */
}

そして、同じことを.sub-header-menu aスタイル定義に追加します。なぜなら、サイトをチェックすると、クラウド コンピューティングでさえラップされ、状況全体が壊れてしまうからです。

アドバイス: CSS の可能性を探っているのは問題ありませんが、CSS をいじりすぎて読みやすさの問題が発生しています。文字と単語の間隔は慎重に操作する必要があります。文字と単語の間隔設定の大部分を削除することをお勧めします。