contactが回り込んでしまう

contactを横並びにしたいのですが回り込んでしまいます。解決方法のご教授をお願いします。リンク内容このサイトの模写をしています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <link rel="stylesheet" href="css/style.css">
7  <title>pas_pol</title>
8</head>
9
10<body>
11  <header class="header">
12    <div class="top">
13      <a href="#" ><img src="img/siteLogo-pc@2x.png" class="logo"></a>
14
15        <nav>
16          <ul class="nav-menu">
17            <li class="nav-list"><a href="#">TOP</a></li>
18            <li class="nav-list"><a href="#">PRODUCT</a></li>
19            <li class="nav-list"><a href="#">ABOUT</a></li>
20            <li class="nav-list"><a href="#">NEWS</a></li>
21            <li class="nav-list"><a href="#">CONTACT</a></li>
22          </ul>
23        </nav>
24
25
26
27    </div>
28  </header>
29
30  <main class="main">
31
32  </main>
33
34  <footer class="footer">
35
36  </footer>
37</body>
38
39</html>
40

css
1@charset "UTF-8";
2
3@font-face {
4  font-family: 'GillSansMTStd-Book';
5  src: local('../font/GillSansMTStd-Book.otf') format('opentype');
6}
7
8@font-face {
9  font-family: 'HelveticaNeue';
10  src: local('../font/HelveticaNeue.ttf') format('opentype');
11}
12
13body{
14  margin:0;
15}
16
17
18.header{
19  background:url("../img/main_visual_7-0x0.jpg");
20  height:790px;
21  width:100%;
22}
23
24.top{
25  width:1440px;
26  height:122px;
27}
28
29.logo{
30  width:266px;
31  height: 72px;
32  margin:40px 336px 0 50px;
33}
34
35.nav-menu{
36  float: right;
37  width:440px;
38  height: 27px;
39  margin-right: 70px;
40}
41
42.nav-list{
43  overflow: hidden;
44  display: inline-block;
45  float: left;
46  list-style-type: none;
47  margin-right: 44px;
48  font-family: 'GillSansMTStd-Book';
49  font-size: 14px;
50  color:#ffffff;
51  font-weight: normal;
52  line-height: 24px;
53}
54
55a{
56  color:#ffffff;
57}
58
59.main{
60
61}
62
63.footer{
64
65}
66

kei344

2018/10/08 06:32

「回り込んでしまいます」とは具体的にどのような状況か、スクリーンショットなどを使って説明いただけませんか？

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

回答1件

ベストアンサー

そもそも color: #ffffff; で文字が全く見えなくなっているので、レイアウトに関する質問するのであれば解除しましょう。

css
1.nav-menu{
2  float: right;
3  /* width:440px; */
4  height: 27px;
5  margin-right: 70px;
6}

幅の指定が狭すぎて自動的に折り返しているだけだと思います。

投稿2018/10/08 06:10

mather

総合スコア6753

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

contactが回り込んでしまう

関連した質問