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
「回り込んでしまいます」とは具体的にどのような状況か、スクリーンショットなどを使って説明いただけませんか?
回答1件
あなたの回答
tips
プレビュー