Q&A
「タブ」とは何のことを言っていますか？
現在作成中のhtmlにおいて
複数のボタンを右寄りにしたいのですがどうするべきかわかりません
html
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<title>会社名</title> 7<link rel="stylesheet" href="css/layout.css"><!-- ページレイアウト用CSS --> 8<link rel="stylesheet" href="css/dynamic.css"><!-- jQueryで操作する部分のCSS --> 9<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 10<script src="scripts/custom.js"></script> 11</head> 12<body> 13<!-- ==============box============== --> 14 <div class="wrapper-headerinfo"> 15 <div class="headerinfo"> 16 <div class="headerinfo-contents clear"> 17 <p>会社名<br> 18 所在地<br> 19 〒111-1111 会社住所</p> 20 </div><!-- /.headerinfocontents --> 21 </div><!-- /.headerinfo --> 22</div><!-- /.wrapper-headerinfo --> 23<!-- ==============/box============== --> 24 <div class="wrapper-header"> 25 <div class="header"> 26 <div class="nav-info"> 27 <a href="#">ACCESS</a> 28 </div> 29 </div><!-- /.header --> 30</div><!-- /.wrapper-header --> 31<!-- ==============dropdown-menu============== --> 32 <div class="wrapper-menubar"> 33 <ul class="menubar"> 34 <li class="dropdown-menu"> 35 <a class="language" href="#">LANGUAGE</a> 36 <ul class="items"> 37 <li><a href="#">Japanese</a></li> 38 <li><a href="#">English</a></li> 39 <li><a href="#">Chinese</a></li> 40 <li><a href="#">Russian</a></li> 41 </ul> 42 </li> 43 </ul> 44 </div> 45<!-- ==============dropdown-menu============== --> 46 47<!-- ==============global============== --> 48<div class="wrapper-nav-global"> 49 <div class="menubtn"><a href="#">CHAPTER</a></div> 50 <ul class="nav-global clear"> 51 <li><a href="#">ABOUT</a></li> 52 <li><a href="#">DL</a></li> 53 <li><a href="#">SHARE</a></li> 54 <li><a href="#">CONTACT</a></li> 55 </ul> 56</div> 57<!-- ==============/global============== --> 58 59<div class="wrapper-category"> 60 <div class="category"> 61 <p>ABOUT</p> 62 </div><!-- /.category --> 63</div><!-- /.wrapper-category --> 64 65<div class="wrapper-main"> 66 <div class="main"> 67 <div class="main-contents"> 68 <!-- ==============gallery============== --> 69 <div class="mainimage"> 70 </div><!-- /.mainimage --> 71 </div> 72 </div> 73 </div> 74 75 76<div class="wrapper-footer"> 77 <div class="footer"> 78 <p>©会社名</p> 79 </div><!-- /.footer --> 80</div><!-- /.wrapper-footer --> 81</body> 82</html>
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4/* 基本設定クリア */ 5html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, legend, article, aside, footer, header, hgroup, menu, nav, section { 6 margin: 0; 7 padding: 0; 8 border: 0; 9 font-size: 100%; 10 font: inherit; 11 vertical-align: baseline; 12 color: #000; 13} 14h1, h2, h3, h4, h5, h6 { 15 font-weight: bold; 16} 17a { 18 text-decoration: none; 19} 20ul { 21 list-style: none; 22} 23.wrapper-headerinfo { 24 background: #000; 25 text-align: right; 26} 27.wrapper-headerinfo p { 28 color: #ffffff 29} 30.wrapper-header { 31 border-top: solid 6px #000; 32 margin: 0,0,0,0; 33} 34.nav-info a { 35 background-color: #000; 36 font-size: 1em; 37 color: #fff; 38 padding: 5px 0 0 0; 39 border-radius: 0 0 3px 3px; 40 margin: 0 0 10px 0; 41 42} 43.wrapper-menubar { 44 position: relative; 45} 46.menubar { 47 position: absolute; 48} 49.wrapper-menubar .menubar .dropdown-menu .language { 50 background-color: #000; 51 font-size: 1em; 52 color: #fff; 53 padding: 5px 0 0 0; 54 border-radius: 0 0 3px 3px; 55 56} 57.dropdown-menu > .items { 58 display: none; 59 margin: 0 0 0 0; 60 position: absolute; 61} 62.dropdown-menu > .items li a { 63 display: block; 64 padding: 5px 0; 65 background: #a2a2a2; 66 color: #fff; 67 font-size: 0.9em; 68 text-align: center; 69}
htmlの中の「ACCESS」と「LANGUAGE」を右寄りのもっていきたいです。
二つをタブで囲んでcssをdisplay: flex;にしてもだめでした。
今回の場合「ACCESS」を押下すると会社住所を「LANGUAGE」を押すとドロップダウンボックスで言語が複数出てくるような設定をそれぞれのボタンで実装することを想定しているます。
display:flexだとうまくいきません何かいい方法はないでしょうか？
以上です、よろしくお願いします。
はい、<a href="#">ACCESS</a>と <a class="language" href="#">LANGUAGE</a>のことです。
こちらの両者を右端にもっていけたらいいのですが・・・でもどうやらLANGUAGEに関してはうまく右に並べるのが難しいようです。absoluteなどの場所の配置を利用してドロップボタンを使用してみたのですが他の方の回答を見るとそもそもうまくいかないようです・・・
回答2件
0
ベストアンサー
CSS
1.wrapper-menubar { 2 position: relative; 3} 4.menubar { 5 position: absolute; 6}
この指定が良くないと思います。.menubarに関してはそれ自体が基準となって、子孫を絶対配置すればよくないですか？
基準としての.menubarで
CSS
1.menubar { 2 position: relative; 3}
そしてこれをラップする.wrapper-menubarで
CSS
1.wrapper-menubar { 2 text-align: right; 3}
「ACCESS」の.wrapper-headerも
CSS
1.wrapper-header { 2 border-top: solid 6px #000; 3 margin: 0; 4 text-align: right; 5}
投稿2021/10/04 13:45
総合スコア8402
ありがとうございます。
「タブ」を右端に集めることはできました。
ただ、言語のドロップボタンを表示してみると「LANGUAGE」の下には表示されませんでしたが一端こちらで終了したいと思います。
参考書をもとにデザインを考えてみたのですが
もう少し修行します。
ご解決でしたら、BAを選出して質問を閉じてください。
0
css
1body { 2 display: flex; 3} 4.wrapper-header { 5 order: 1; 6 margin-left: auto; 7} 8.wrapper-menubar { 9 order: 1; 10}
とすると、それっぽくなります。
ただし、
css
1.menubar { 2 position: absolute; 3}
となっているので、.wrapper-menubar の内容物がなくなっており、横並びにした時に幅を保つことができません。
.wrapper-menubarを固定幅にするか、絶対配置をやめるか、JavaScriptで幅を動的に指定するか、などの解決方法があると思います。
投稿2021/10/04 05:15
総合スコア36960
あなたの回答
tips
プレビュー
