横並びメニューの右寄せ
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
ブラウザ幅いっぱいの横並びのメニューを作成しています。
背景はフルスクリーンで、
メニューのみ幅960pxで右寄せにしたいです。
<div id="bar">
<ul id="menu">
<li>ホーム</li>
<li>会社概要</li>
<li>問い合わせ</li>
</ul>
</div>
#bar{
width: 100%;
height:40px;
margin: 0;
padding: 0;
background: #312F2F;
}
#menu {
width: 960px;
height: 40px;
list-style-type: none;
margin-left: auto;
padding: 0;
background: #312F2F;
}
#menu li{
margin: 0;
padding: 0;
text-align: center;
display: inline-block;
}
#gaiyou li a{
display: block;
margin: 0;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
menuの幅自体は980pxなのですが、
親の#bar 幅100％の中で、
menuのブロックごとmargin-left: auto;がかかってしまっています。
リスト内容のみ、右寄せにする方法を教えて頂きたいです。
宜しくお願い致します。
背景はフルスクリーンで、
メニューのみ幅960pxで右寄せにしたいです。
<div id="bar">
<ul id="menu">
<li>ホーム</li>
<li>会社概要</li>
<li>問い合わせ</li>
</ul>
</div>
#bar{
width: 100%;
height:40px;
margin: 0;
padding: 0;
background: #312F2F;
}
#menu {
width: 960px;
height: 40px;
list-style-type: none;
margin-left: auto;
padding: 0;
background: #312F2F;
}
#menu li{
margin: 0;
padding: 0;
text-align: center;
display: inline-block;
}
#gaiyou li a{
display: block;
margin: 0;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
menuの幅自体は980pxなのですが、
親の#bar 幅100％の中で、
menuのブロックごとmargin-left: auto;がかかってしまっています。
リスト内容のみ、右寄せにする方法を教えて頂きたいです。
宜しくお願い致します。
はる さん
10月27日 10時53分
はるさん、こんばんは。
右寄せ……ということで、
#menu内のCSSに下記を追加することで、#menu内のリストは右に寄ります。
ちなみに、これだとメニューが画面の右端に行ってしまい、画面が大きな環境だと見づらくなります。#menuの
を
と、左右にautoを指定してやり#menu自体はセンタリングさせる方法も、メニューではよく使われます。
もしも、質問の意図と乖離がありましたら具体的にお知らせいただければと思います。
右寄せ……ということで、
#menu内のCSSに下記を追加することで、#menu内のリストは右に寄ります。
text-align: right;
ちなみに、これだとメニューが画面の右端に行ってしまい、画面が大きな環境だと見づらくなります。#menuの
margin-left: auto;
を
margin: 0 auto;
と、左右にautoを指定してやり#menu自体はセンタリングさせる方法も、メニューではよく使われます。
もしも、質問の意図と乖離がありましたら具体的にお知らせいただければと思います。
馬場誠 さん
10月27日 20時52分
