LoginSignup
0
3

More than 3 years have passed since last update.

navを右寄せする方法

Last updated at Posted at 2019-09-19

まずhtmlを書きます。

right.html
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTMLリファレンス</a></li>
<li><a href="css.html">CSSリファレンス</a></li>
</ul>
</nav>

それからcssを調整します。
CSSの、
ulに「text-align:right」を指定して右寄せにする。
そしてliタグを「display:inline」または「display:inline-block」を指定する。
ただしinline-blockはIE7以下は対応していないので「zoom:1」を設定する必要がある。

right.css
ul{
    text-align:right;
}

li{
    display:inline; 
    padding:0 10px;
}

// inline-blockの場合
li{
    display:inline-block; 
    padding:0 10px;
    zoom:1 // IE7以下
}

【CSS】横並びにしたリストをを右寄せにするには
を参照
横並びのリストを中央寄せにする5つの方法
を参考

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3