NEW ARTICLE
tkinterでテキストボックスに絵文字を表示する方法
  • 【CSS】メニューの一部だけを右揃えにする方法

【CSS】メニューの一部だけを右揃えにする方法

【CSS】メニューの一部だけを右揃えにする方法

　Webサイトを作っていて、メニューの一部だけを右揃えにしたい時ってありますよね。さっそくコードを紹介していきます。

コード

HTML

<nav id="menu">
<li class="menu-l"><a href="index.html">ホーム</a></li>
<li class="menu-l"><a href="">ご注文方法</a></li>
<li class="menu-l"><a href="">ポイント制度</a></li>
<li class="menu-l"><a href="">お問い合わせ</a></li>
<li class="menu-l"><a href="">よくある質問</a></li>
<li class="menu-r"><a href="" >カートへ</a></li>
</nav>

CSS

/*menu*/
#menu li a{
	font-size: 20px;
	padding:0px 10px;
	text-decoration: none;/*リンクの下線を消す*/
	background-color: #fff;
}
#menu li a:hover{
    background: #000;   /*背景色*/
    color: #fff;        /*文字色*/
}
.menu-l{
	float: left;
	text-align: left;/*左揃え*/
}
.menu-r{
	text-align: right;/*右揃え*/
}

　今回はリスト(li)に、左揃えにするclassのmenu-lと、右揃えにするmenu-rのクラスを追加しています。こうすることで、カートへと書かれた最後のリストの要素だけ右揃えになります。