###前提・実現したいこと
ロゴとグローバルナビを横一列に並べた上で、
ロゴを左端、グローバルナビを右端に配置し、
かつそれらを下端で揃えたい。
意味が分かるでしょうか。
例えば、以下のサイトのようなイメージです。
https://www.sakurajyuji.or.jp/
###発生している問題・エラーメッセージ(1/2)
以下のような記述で、ロゴとグローバルナビを下端で揃えることまではできました。
###該当のソースコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6<link rel="stylesheet" href="css/reset.css"> 7<link rel="stylesheet" href="css/style.css"> 8</head> 9 10<body> 11 <div class="wrap"> 12 <h1 class="logo">LOGO</h1> 13 <div class="global-navi"> 14 <ul> 15 <li>CCC</li> 16 <li>BBB</li> 17 <li>AAA</li> 18 </ul> 19 </div> 20 </div> 21</body> 22</html>
CSS
1style.css 2 3@charset "utf-8"; 4/* CSS Document */ 5 6body {width: 1000px;} 7.logo {font-size: 36px;} 8.global-navi , .logo { 9 border: 1px solid #000000; 10 display: inline-block; 11 vertical-align: bottom; 12} 13.global-navi ul { 14 list-style: none; 15 overflow: hidden; 16} 17.global-navi ul li { 18
css
1reset.css 2/** 3 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) 4 * Richard Clark (http://richclarkdesign.com) 5 * http://cssreset.com 6 */ 7html, body, div, span, object, iframe, 8h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9abbr, address, cite, code, 10del, dfn, em, img, ins, kbd, q, samp, 11small, strong, sub, sup, var, 12b, i, 13dl, dt, dd, ol, ul, li, 14fieldset, form, label, legend, 15table, caption, tbody, tfoot, thead, tr, th, td, 16article, aside, canvas, details, figcaption, figure, 17footer, header, hgroup, menu, nav, section, summary, 18time, mark, audio, video { 19 margin:0; 20 padding:0; 21 border:0; 22 outline:0; 23 font-size:100%; 24 vertical-align:baseline; 25 background:transparent; 26} 27body { 28 line-height:1; 29} 30article,aside,details,figcaption,figure, 31footer,header,hgroup,menu,nav,section { 32 display:block; 33} 34nav ul { 35 list-style:none; 36} 37blockquote, q { 38 quotes:none; 39} 40blockquote:before, blockquote:after, 41q:before, q:after { 42 content:''; 43 content:none; 44} 45a { 46 margin:0; 47 padding:0; 48 font-size:100%; 49 vertical-align:baseline; 50 background:transparent; 51} 52/* change colours to suit your needs */ 53ins { 54 background-color:#ff9; 55 color:#000; 56 text-decoration:none; 57} 58/* change colours to suit your needs */ 59mark { 60 background-color:#ff9; 61 color:#000; 62 font-style:italic; 63 font-weight:bold; 64} 65del { 66 text-decoration: line-through; 67} 68abbr[title], dfn[title] { 69 border-bottom:1px dotted; 70 cursor:help; 71} 72table { 73 border-collapse:collapse; 74 border-spacing:0; 75} 76/* change border colour to suit your needs */ 77hr { 78 display:block; 79 height:1px; 80 border:0; 81 border-top:1px solid #cccccc; 82 margin:1em 0; 83 padding:0; 84} 85input, select { 86 vertical-align:middle; 87} 88
###発生している問題・エラーメッセージ(2/2)
しかし、これを左端と右端に配置するために、
以下のようにfloatを加えると、inline-boxの設定が効かなくなるのか、
グローバルナビが上にあがってしまいます。
どうすれば、実現できるでしょうか。
ご教授いただければと思います。
###該当のソースコード
CSS
1style.css 2 3@charset "utf-8"; 4/* CSS Document */ 5 6body {width: 1000px;} 7.logo {font-size: 36px;} 8/* 追加した部分(ここから) */ 9.wrap{overflow: hidden;} 10.logo {float: left;} 11.global-navi {float: right;} 12/* 追加した部分(ここまで) */ 13.global-navi , .logo { 14 border: 1px solid #000000; 15 display: inline-block; 16 vertical-align: bottom; 17} 18.global-navi ul { 19 list-style: none; 20 overflow: hidden; 21} 22.global-navi ul li { 23
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/17 10:28