質問編集履歴

1 修正

innjera

innjera score 117

2016/12/19 07:59  投稿

ul要素のpadding-leftの調整がうまくいかない
`bootstrap`を利用しています。  
`ul`要素にはデフォルトで`padding-left`が付いていますが、何もしないと写真の様に左側にスペース(赤色)ができてしまいます。
![イメージ説明](6423f08d3859119298eeef2f95420a13.png)
一方、`padding-left:0`とすると(何故か意図と異なり)左側に行き『**過ぎ**』てしまいます。
![イメージ説明](a0ac06cb1711dfe0594ab64928234b5e.png)
`padding-left:1rem`などとすると、ましにはなりますが、写真の通り左側にスペース(赤色)が残ってしまい、どうもすっきりしません。綺麗に左に寄せたいのですが、誤りをご指摘頂けると幸甚です。
![イメージ説明](fa83870341b24fdb637cc163b7001a7d.png)
```html
<header>
   <div class="row">
     <nav class="navscroll">
       <div class="naviContent">
         <ul>
           <li class="current"><a href="#">メイク</a></li>
           <li><a href="#">ヘアアレンジ</a></li>
           <li><a href="#">アドバイザーランキング</a></li>
           <li><a href="#">Cuty</a></li>
           <li><a href="#">others</a></li>
         </ul>
       </div>
     </nav>
   </div>
</header>
```
```css
.navscroll {
 padding-left:0rem;
 background-color: $red;
 height: 40px;
 overflow: hidden;
 position: relative;
 z-index: 1;
 border-top: 1px solid #e6e6e6;
}
.naviContent {
 -webkit-user-select: none;
 display: block;
 height: 54px;
 overflow-y: hidden;
 padding: 0;
 position: relative;
 -webkit-overflow-scrolling: touch;
 overflow-x: scroll;
}
.naviContent ul {
 display: inline-block;
 position: relative;
 white-space: nowrap;
 overflow: hidden;
 padding-left: 1rem;
 font-size: 0;
}
.naviContent ul li {
 display: inline-block;
 line-height: 40px;
 height: 40px;
 margin-left: 0px;
 padding-left: 0px;
 text-align: center;
 background-color: $ultra_super_light_gray;
 font-size: 14px;
 position: relative;
}
.naviContent ul li.current:before{
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: #f0980e;
}
.naviContent ul li a {
 border-right: 1px solid #e6e6e6;
 font-size: 1em;
 padding: 0px 16px;
 display: inline-block;
 color: #888;
}
```
  • CSS3

    2694 questions

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

  • Bootstrap

    1338 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る