cssでの複数のタブで囲まれたボタンの右寄りの配置

現在作成中の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だとうまくいきません何かいい方法はないでしょうか？

以上です、よろしくお願いします。

itagagaki

2021/10/04 04:14

「タブ」とは何のことを言っていますか？

Carlos_is_only

2021/10/04 07:07

はい、<a href="#">ACCESS</a>と <a class="language" href="#">LANGUAGE</a>のことです。こちらの両者を右端にもっていけたらいいのですが・・・でもどうやらLANGUAGEに関してはうまく右に並べるのが難しいようです。absoluteなどの場所の配置を利用してドロップボタンを使用してみたのですが他の方の回答を見るとそもそもうまくいかないようです・・・

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

回答2件

ベストアンサー

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

itagagaki

総合スコア8402

Carlos_is_only

2021/10/04 16:11

ありがとうございます。「タブ」を右端に集めることはできました。ただ、言語のドロップボタンを表示してみると「LANGUAGE」の下には表示されませんでしたが一端こちらで終了したいと思います。参考書をもとにデザインを考えてみたのですがもう少し修行します。

Lhankor_Mhy

2021/10/05 04:24

ご解決でしたら、BAを選出して質問を閉じてください。

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

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

Lhankor_Mhy

総合スコア36163

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

cssでの複数のタブで囲まれたボタンの右寄りの配置

関連した質問