質問: オンマウス時に下線が入るようにしたのですが、横100%で表示されません。 どうすればいいですか? ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/304a48d55eef631cdbdc7c46f9600043.png) ``` ホーム ブログ ``` ``` /* オンマウス時下線追加 */ /* 通常時(マウスカーソルがのっていない時)のデザイン */ .item{ border-bottom: none; /* 装飾なし */ } /* オンマウス(hover)時 */ .item:hover{ border-bottom-width:2px; border-bottom-color:#F00; border-bottom-style: solid; } ``` 全CSSです。 ``` body{ background: #FFF; margin:0; } .nav{ /* 上部の隙間調節 */ margin-top:23px; } ol,ul{ /* 文字の前に付く点をなくす */ list-style:none ; } a{ /* 下線を消す */ text-decoration:none; } li{ /* 周りの空間を調節 */ margin:5px; } .item{ /* 文字をセンタリングする */ text-align:center } .wap{ position: relative; overflow: hidden; } .wap ul { position: relative; left: 50%; float: left; } .wap ul li { position: relative; left: -50%; float: left; } .alt1{ border-right-width:1px; border-right-color:#A49D9D; border-right-style: solid; } /* オンマウス時下線追加 */ /* 通常時(マウスカーソルがのっていない時)のデザイン */ .item{ border-bottom: none; /* 装飾なし */ } /* オンマウス(hover)時 */ .item:hover{ border-bottom-width:3px; border-bottom-color:#F00; border-bottom-style: solid; } ```
回答: 見たところブロック間に隙間ができてしまってるのが問題かと思います。 の横並びにする方法はどんな手段を使っていますか? display:inline-blockで並べる際、改行コードが半角スペースとして扱われてしまうため 隙間ができてしまう事があります。 ■CSSで隙間を無くす方法 ※liタグにletter-spacing: -.40em;を指定 li内のaタグにletter-spacing: nomal;で行間をもとに戻す。 ■float:leftで横並びさせる方法 ※子要素がfloatすると親要素が内部の高さを取れなくなるので、親要素へのclearfix処理が必要です。