HP作成中。Chromeブラウザのみレイアウト崩れ

質問

見よう見まねで結構古くからＨＰ造りをしています。
今は、レスポンシブデザインでのショップ作り中です。
ＨＰ造りながら、色々なブラウザでも表示状態を確認していますが、
いつもいつもＩＥの常用者でGoogle Chromeでの表示確認を怠っていました。

現在のＨＰはパソコン画面では、ＩＥ，サファリ、ファイアーフォックスで綺麗にレイアウトが出来ています。

ただ、Google Chrome ブラウザだけパソコン画面では、
トップから２段目の折り畳みのアコーディオンメニューが上下に２段になってしまいます。
他のブラウザでは問題なく１段に収まります。

http://www.waterplanet.jp/

何分、ネットでの独学勉強のＨＰ造りなので、このChrome表示の修正を思い付きません。
どなたか、独学勉強の者に判り易く、適切なアドバイスをして戴ければ有難いです。
どうかご協力を宜しくお願い致します。

山田と言います。

回答No.3

roid_moon

HTMLにもcssにも問題点はたくさんあるのですが、

問題の崩れの原因は
http://www.waterplanet.jp/style/style002.css
の85行目から始まっている以下のcssにあります。

.animenu >
ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
}
.animenu > ul > li > a {
float: left;
padding: 1em 3em;
text-transform: uppercase;
}
この書き方だとボタンの幅が文字数によって変わるし、ウィンドウの幅が狭い時にはどのブラウザでも崩れるでしょうね。

▼私だったら、以下のように修正します。
.animenu >
ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
width: 20%;
}
.animenu > ul > li > a {
padding: 1em 0;
text-align:center;
text-transform: uppercase;
display:block;
width: 100%;
}

この書き方でも、ウィンドウの幅によってはテキストが1行のボタンと複数行のボタンが混在するので、高さをそろえるjsを導入します。

回答No.2

muuming2001

li の幅が明示的に指定されてないからだと思います。

.animenu > ul > li > a {
/*float: left;
padding: 1em 3em;*/
text-transform: uppercase;
}

このfloat:leftは意味がないと思います。paddingも消しましょう。

.animenu > ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
text-align:center;//追記
height:47px;//追記
line-height:47px;//追記
}

/*メニュー1番目の幅*/
.animenu > ul > li:nth-type-of(1){
width:145px;
}

/*メニュー2番めの幅*/
.animenu > ul > li:nth-type-of(2){
width:185px;
}

と言った感じで、、、後は調整してくんさい

回答No.1

yuki_n_y

Windows 10 Pro
クロームバージョン 56.0.2924.87

ですが普通に見えていますが、何処の事でしょう、ページ番号を