メニューバーのリストの右寄せができない

今、ヘッダーのメニューバーを作成しています。

実現したいのは、
下記のようなバーです。

｜　　　　　　　　　　　　　　　　　　　　リスト1　リスト2　リスト3｜

しかし今は下記のようにリストのブロックの中で右寄になっています。

｜　　　　　　　　　　　リスト1　　　　　リスト2　　　　　　　リスト3｜

text-align: center;など試してみましたが、うまくいきません
間違えがあればご教示頂きたいです。
宜しくお願い致します。

html
1
2<html>
3<head>
4<title>レスポンシブ対応メニュー</title>
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=3.8.1"></script>
7<!--[if lt IE 9]>
8<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
9<![endif]-->
10<link href="style.css" rel="stylesheet" type="text/css">
11<script type='text/javascript'>
12$(function(){
13  $("#toggle").click(function(){
14    $("#menu").slideToggle();
15    return false;
16  });
17  $(window).resize(function(){
18    var win = $(window).width();
19    var p = 480;
20    if(win > p){
21      $("#menu").show();
22    }
23  });
24});
25</script></head>
26<body>
27<div class="header">
28  <h1>sample</h1>
29</div><div id="menu-box">
30  <div id="toggle"><a href="#">menu</a></div>
31  <ul id="menu" class="">
32    <li><a href="#">html</a></li>
33    <li><a href="#">css</a></li>
34    <li><a href="#">javascript</a></li>
35    <li><a href="#">php</a></li>
36    <li><a href="#">CGI</a></li>
37    <li><a href="#">Python</a></li>
38    <li><a href="#">Ruby</a></li>
39    <li><a href="#">java</a></li>
40  </ul>
41</div>
42<div class="main">メインコンテンツ</div>
43</body>
44
45<script>
46  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
47  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
48  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
49  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
50
51  ga('create', 'UA-775394-6', 'auto');
52  ga('send', 'pageview');
53
54</script>
55
56</html>
57
58
59コード

css
1body { margin: 0; padding: 0; color: #222; font-size : 13px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
2
3.header { width: 100%; max-width: 960px; margin: 0 auto; padding: 30px 0 0; }
4h1 { margin: 0; padding: 0 10px 10px; font-size: 24px; }
5.main {
6  clear: both;
7  width: 100%;
8  max-width: 960px;
9  margin: 0 auto;
10  padding: 30px 0 200px;
11  background: #999;
12  text-align: center;
13}
14
15#menu{
16  width: 100%;
17  max-width: 960px;
18  margin: 0 auto;
19  padding: 0;
20}
21#menu li{
22  display: inline-block;
23  float: left;
24  width: 12.5%;
25  margin: 0;
26  padding: 0; }
27#menu li a{
28  display: block;
29  padding: 12px 0 10px;
30  background: #333;
31  color: #fff;
32  text-align: right;
33  text-decoration: none;
34}
35#menu li a:hover{
36  background: #444;
37}
38#toggle{ 
39 display: none;
40}
41@media only screen and (max-width: 768px) {
42    #menu li{
43    width: 25%;
44    border-bottom: 1px solid #444;
45  }
46}
47@media only screen and (max-width: 480px) {
48  #menu{
49    display: none;
50  }
51  #menu li{
52    width: 50%;
53  }
54  #menu li a{
55    text-align: center;
56  }
57  #toggle{
58    display: block;
59    position: relative;
60    width: 100%;
61    background: #222;
62  }
63  #toggle a{
64    display: block;
65    position: relative;
66    padding: 12px 0 10px;
67    border-bottom: 1px solid #444;
68    color: #fff;
69    text-align: center;
70    text-decoration: none;
71  }
72  #toggle:before{
73    display: block;
74    content: "";
75    position: absolute;
76    top: 50%;
77    left: 10px;
78    width: 20px;
79    height: 20px;
80    margin-top: -10px;
81    background: #fff;
82  }
83  #toggle a:before, #toggle a:after{
84    display: block;
85    content: "";
86    position: absolute;
87    top: 50%;
88    left: 10px;
89    width: 20px;
90    height: 4px;
91    background: #222;
92  }
93  #toggle a:before{
94    margin-top: -6px;
95  }
96  #toggle a:after{
97    margin-top: 2px;
98  }
99}
100コード

行動規範の内容に同意します

回答1件

ベストアンサー

下記追加して

css
1#menu{
2	background: #333;
3	display: flex;
4	justify-content: flex-end;
5}

これ外したら理想の表示になりませんか？

css
1#menu li{
2	display: inline-block;
3	float: left;
4	width: 12.5%;
5}

「#menu li a」のpaddingも調整しないとだと思いますけど。

css
1#menu li a{
2  padding: 12px 1em 10px;
3}

投稿2018/06/03 12:34

kszk311

総合スコア3404

kei-chan

2018/06/03 13:49

今試しましたら、一発でうまくいきとても助かりました。本当に感謝しています。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

メニューバーのリストの右寄せができない

関連した質問