質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

3回答

8446閲覧

ul要素のpadding-leftの調整がうまくいかない

innjera

総合スコア132

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/12/18 14:35

編集2016/12/18 22:59

bootstrapを利用しています。
ul要素にはデフォルトでpadding-leftが付いていますが、何もしないと写真の様に左側にスペース(赤色)ができてしまいます。
イメージ説明

一方、padding-left:0とすると(何故か意図と異なり)左側に行き『過ぎ』てしまいます。
イメージ説明
padding-left:1remなどとすると、ましにはなりますが、写真の通り左側にスペース(赤色)が残ってしまい、どうもすっきりしません。綺麗に左に寄せたいのですが、誤りをご指摘頂けると幸甚です。
イメージ説明

html

1<header> 2 <div class="row"> 3 <nav class="navscroll"> 4 <div class="naviContent"> 5 <ul> 6 <li class="current"><a href="#">メイク</a></li> 7 <li><a href="#">ヘアアレンジ</a></li> 8 <li><a href="#">アドバイザーランキング</a></li> 9 <li><a href="#">Cuty</a></li> 10 <li><a href="#">others</a></li> 11 </ul> 12 </div> 13 </nav> 14 </div> 15</header>

css

1.navscroll { 2 padding-left:0rem; 3 background-color: $red; 4 height: 40px; 5 overflow: hidden; 6 position: relative; 7 z-index: 1; 8 border-top: 1px solid #e6e6e6; 9} 10.naviContent { 11 -webkit-user-select: none; 12 display: block; 13 height: 54px; 14 overflow-y: hidden; 15 padding: 0; 16 position: relative; 17 -webkit-overflow-scrolling: touch; 18 overflow-x: scroll; 19} 20.naviContent ul { 21 display: inline-block; 22 position: relative; 23 white-space: nowrap; 24 overflow: hidden; 25 padding-left: 1rem; 26 font-size: 0; 27} 28.naviContent ul li { 29 display: inline-block; 30 line-height: 40px; 31 height: 40px; 32 margin-left: 0px; 33 padding-left: 0px; 34 text-align: center; 35 background-color: $ultra_super_light_gray; 36 font-size: 14px; 37 position: relative; 38} 39.naviContent ul li.current:before{ 40 content: ""; 41 display: block; 42 position: absolute; 43 top: 0; 44 left: 0; 45 width: 100%; 46 height: 3px; 47 background-color: #f0980e; 48} 49.naviContent ul li a { 50 border-right: 1px solid #e6e6e6; 51 font-size: 1em; 52 padding: 0px 16px; 53 display: inline-block; 54 color: #888; 55} 56

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

上記回答に同じですが、こちらは Windows 10 で、ブラウザは Vivaldi 1.6.689.34 ( Stable channel ) ( 32bit ) を使い、中身は Chrome 55 相当です。ちなみに、padding-left: 1rem;では、左サイドが開いたままでした。

2名が padding-left: 0; でご希望通りに表示されているので、ブラウザ環境他や、コードの見えていない部分でブラウザ・モード指定が無いか、と感じました。

イメージ説明

投稿2016/12/18 20:00

Webmans-JP

総合スコア51

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Webmans-JP

2016/12/18 20:10 編集

ちなみに、 html, body { background-color: black; margin: 0; padding: 0; } を加え、背景を黒に、.navscroll 背景は直接そのまま赤にしてありますが、影響は無いと思います。
innjera

2016/12/18 22:44

有難う御座います。 ご指摘の通りとは思うのですが、やはり2枚目の写真の現象が起きてしまいます (ul li aにpadding-left: 16pxを入れたまま、ulでpadding:0 )何か別の箇所の設定が悪さをしているのかも知れないので見直して見ます。
innjera

2016/12/18 22:58

自己解決に記載したのですが、bootstrapを利用しており、rowをclassで使っている一方で、containerをセットで使用していないことが原因でした。私の情報が不十分でした。失礼しました。
guest

0

CSS

1.naviContent ul { 2 padding-left: 0; 3}

これで綺麗になっていると思うのですが…。
イメージ説明

.naviContent ul li a に padding-left: 16px がかかっているので、
2 番目の写真のようになることは無いのでは…と思ってしまいます。

投稿2016/12/18 14:52

MEBITUS

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2016/12/18 22:43

有難う御座います。 ご指摘の通りとは思うのですが、やはり2枚目の写真の現象が起きてしまいます (ul li aにpadding-left: 16pxを入れたまま、ulでpadding:0 )何か別の箇所の設定が悪さをしているのかも知れないので見直して見ます。
innjera

2016/12/18 22:58

自己解決に記載したのですが、bootstrapを利用しており、rowをclassで使っている一方で、containerをセットで使用していないことが原因でした。私の情報が不十分でした。失礼しました。
guest

0

自己解決

'bootstrap'を利用していたのですが、rowにデフォルトでmargin-left:-15pxmargin-right:-15pxが入っていることが原因でした。containerを使用することで、containerにはデフォルトでpadding-right: 15pxpadding-left: 15pxが入っている為、整うわけですが、今回、containerクラスを指定せずにrowクラスのみ指定していたことが左側に行き過ぎてしまう原因でした。

投稿2016/12/18 22:57

innjera

総合スコア132

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問