まず、リストタグ特有の黒丸があると見栄えが悪いので、list-style:none
で黒丸を消します。
で、本題の改行されてしまう問題ですが、footer_naviクラスの横幅600pxに対しリストタグがそれぞれ122px (5つで610px )になっているために起こっている問題だと思います。なので、footer li a
のwidth
を118px
にするとこの改行されてしまう現象はなくなります。
HTML
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4 <meta charset="UTF-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 /*container(全体の囲み)*/
8 #container{
9 width:900px;
10 margin:0 auto;
11 padding:30px;
12 background-color:#ffffff;
13 }
14
15 /* footer*/
16 footer{
17 background-color:lightcyan;
18 width:900px;
19 }
20 footer ul.footer_navi{
21 overflow:hidden;
22 margin:0 auto;
23 width:600px;
24 background:blue;
25 list-style: none;
26 }
27 footer ul.footer_navi li{
28 float:left;
29 border:1px solid gray;
30 box-sizing:border-box;
31 }
32 footer li a{
33 display:block;
34 width:118px;
35 height:20px;
36 line-height:20px;
37 text-align:center;
38 background-color:lightcoral;
39 }
40 </style>
41 </head>
42 <body>
43 <footer>
44 <ul class='footer_navi'>
45 <li><a href='#'>ホーム</a></li>
46 <li><a href='#'>料金表</a></li>
47 <li><a href='#'>フォト</a></li>
48 <li><a href='#'>ホテル</a></li>
49 <li><a href='#'>お問い合わせ</a></li>
50 </ul>
51 </footer>
52 </body>
53 </html>
追記
HTML
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 /* 下を追加(それ以外は同じ) */
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 /*container(全体の囲み)*/
14 #container {
15 width: 900px;
16 margin: 0 auto;
17 padding: 30px;
18 background-color: #ffffff;
19 }
20
21 ul {
22 list-style: none;
23 }
24
25 /*#navi*/
26 #navi {
27 overflow: hidden;
28 }
29
30 #navi ul li {
31 float: left;
32 }
33
34 #navi ul li a {
35 display: block;
36 width: 180px;
37 height: 50px;
38 line-height: 50px;
39 text-align: center;
40 border: 1px solid black;
41 box-sizing: border-box;
42 background: url(../img/header_back.jpg);
43 color: black;
44 }
45
46 ul::after {
47 clear: both;
48 }
49
50 #navi ul li a:hover {
51 background: url(../img/dog_back.png) no-repeat left;
52 background-size: 40px;
53 }
54
55 /* footer*/
56 footer {
57 background-color: lightcyan;
58 width: 900px;
59 }
60
61 footer ul.footer_navi {
62 overflow: hidden;
63 margin: 0 auto;
64 width: 600px;
65 background: blue;
66 }
67
68 footer ul.footer_navi li {
69 float: left;
70 border: 1px solid gray;
71 box-sizing: border-box;
72 }
73
74 footer li a {
75 display: block;
76 width: 118px;
77 height: 20px;
78 line-height: 20px;
79 text-align: center;
80 background-color: lightcoral;
81 }
82 </style>
83 </head>
84 <body>
85 <div id="container">
86 <div id='navi'>
87 <ul>
88 <li><a href='#'>ホーム</a></li>
89 <li><a href='#'>料金表</a></li>
90 <li><a href='#'>フォト</a></li>
91 <li><a href='#'>ホテル</a></li>
92 <li><a href='#'>お問い合わせ</a></li>
93 </ul>
94 </div>
95
96 <footer>
97 <ul class='footer_navi'>
98 <li><a href='#'>ホーム</a></li>
99 <li><a href='#'>料金表</a></li>
100 <li><a href='#'>フォト</a></li>
101 <li><a href='#'>ホテル</a></li>
102 <li><a href='#'>お問い合わせ</a></li>
103 </ul>
104 </footer>
105 </div>
106 </body>
107 </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/24 00:18