前提・実現したいこと

ブレイクポイント641pxまでメニュー部分<div class="logo_and_title">がカラム落ちしないように設定したいです。

#発生している問題
補足情報にある添付画像のようにトップのメニューがブラウザ環境(chrome)幅が647pxでカラム落ちが発生します。

試したこと

①manu_button li{float:left;}の代わりにdisplay:inline-block;を入れてみる。
②floatが入っているロゴ[.top_logo_nav h1]とメニュー[<div class="logo_and_title">]にwidthを設定してみる。

該当のソースコード

HTML
1<!DOCTYPE html>
2	<html lang="ja">
3
4	<head>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1">
7		<link rel="stylesheet" href="css/reset.css">
8		<link rel="stylesheet" href="css/style.css">
9		<title>baaa_corporation</title>
10	</head>
11
12	<body>
13		<div id="wrap">
14			<!-- <div class="main"> -->
15			<div class="top_logo_nav clearfix">
16				<h1>BAAA Corporation</h1>
17				<div class="logo_and_title">
18					<ul class="manu_button clearfix">
19						<li><a href="#">会社概要</a></li>
20						<li><a href="#">事業紹介</a></li>
21						<li><a href="#">採用情報</a></li>
22						<li><a href="#">お問い合わせ</a></li>
23					</ul>
24				</div>
25			</div>
26	</body>
27
28	</html>

CSS
1.clearfix::after {
2	content: "";
3	display: block;
4	clear: both;
5}
6
7
8img {
9	width: 100%;
10	height: auto;
11}
12
13* {
14	box-sizing: border-box;
15}
16
17
18
19
20a {
21	text-decoration: none;
22	color: #fff;
23}
24
25/* ------------------------------------------ */
26
27
28body {
29	margin: 0 auto;
30}
31
32#wrap {
33	width: 1200px;
34	max-width: 100%;
35	margin: auto;
36	font-size: 16px;
37}
38
39.main {
40	width: 100%;
41	max-width: 1200px;
42}
43
44.top_logo_nav {
45	width: 960px;
46	max-width: 100%;
47	margin: 20px auto 20px auto;
48	position: relative;
49}
50
51.top_logo_nav h1 {
52	font-size: 28px;
53	font-weight: bold;
54	float: left;
55}
56
57
58
59.logo_and_title {
60	float: right;
61	box-sizing: border-box;
62	/* margin-right: 5.5rem; */
63}
64
65
66.manu_button {
67	font-size: 0;
68	line-height: 2.5;
69	list-style: none;
70	overflow: hidden;
71	/* float: right; */
72	/* position: relative; */
73}
74
75.manu_button li {
76	width: 110px;
77	max-width: 100%;
78	float: left;
79	font-size: 14px;
80	font-weight: bold;
81	/* margin-right: 10px; */
82}
83
84.manu_button li a {
85	text-decoration: none;
86	color: #000;
87	margin-left: 20px;
88}
89
90.manu_button li a::before {
91	position: absolute;
92	content: "";
93	display: block;
94	margin-top: 11px;
95	/* margin-left: -14px;消 */
96	/* top: 7.5%; 削除*/
97	left: auto;
98	height: 0;
99	width: 0;
100	border-style: solid;
101	border-width: 6px 0 6px 10px;
102	border-color: transparent transparent transparent #006699;
103}
104
105
106
107
108@media screen and (max-width: 641px) {
109
110	section h2 {
111		padding-bottom: 20px;
112	}
113
114	section h3 {
115		margin:
116			105px auto 35px;
117	}
118
119	#wrap {
120		width: 100%;
121	}
122
123	.top_logo_nav {
124		width: 100%;
125		/*width:100%;→①manu_buttonのリストをカラム落ちさせないために試しに設定*/
126	}
127
128	.logo_and_title {
129		float: right;
130		margin-right: 55px;
131		/* 	 */
132	}
133
134
135	.manu_button li {
136		max-width: 100%;
137	}
138
139
140}

補足情報（FW/ツールのバージョンなど）

Lhankor_Mhy

2020/05/20 07:19

入力の途中で投稿してしまいましたか？

icchiman

2020/05/20 07:34

コメントありがとうございます。質問内容を全て入力したあとに投稿しましたが、おっしゃるとおり途中で投稿してしまったようです。後程、再投稿いたします。

Yorrie

2020/05/20 07:46

質問は編集できますので…。

kei344

2020/05/20 11:31

幅が一定以下になったら当然「カラム落ち」しますが、どのように回避したいのでしょう。

icchiman

2020/05/21 10:04

ご返事が遅くなってしまい申し訳ありません。 kei344さんコメントありがとうございます。幅が一定以下になるとカラム落ちするものなのですね。実現したいことの内容が不足していたのですが最終的にロゴととメニューが一行で並べられるように調整させたいです。またはカラム落ちをさせる場合はロゴとメニューを2行にして中央表示させるようにしたいです。

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

回答2件

ベストアンサー

幅が一定以下になるとカラム落ちするものなのですね。

例えば幅10のところに幅5と幅6のものを入れられないしfloatの場合カラム落ちします。

最終的にロゴととメニューが一行で並べられるように調整させたいです。

またはカラム落ちをさせる場合はロゴとメニューを2行にして中央表示させるようにしたいです。

647px以下の端末も対象に考えているなら、カラム落ちするあたりで中央表示に切り替えてはいかがでしょう。h1と.logo_and_titleのfloatを解消して、.logo_and_titleをinline-blockにしてtext-align: center;で中央とか。

投稿2020/05/21 15:45

kei344

総合スコア69606

icchiman

2020/05/25 11:12

kei344さんご返事が遅くなってしまいすみません。前回ご回答いただいたfloatのカラム落ちとh1と.logo_and_titleのfloatを解消を参考に 647px以下でh1と.logo_and_titleのfloat解除しmargin:0 auto;をつけることで中央表示させることができました。長い間詰まっていたので解決することできてうれしいです。ありがとうございました。

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

カラム落ちさせないのであれば、画面からはみ出すと思いますが、それでよろしいのですか？
サンプル

css
1.top_logo_nav {
2    width: max-content; /* 変更 */
3    max-width: 960px; /* 変更 */
4    margin: 20px auto 20px auto;
5    position: relative;
6}

投稿2020/05/21 02:07

Lhankor_Mhy

総合スコア36960

icchiman

2020/05/21 10:12

Lhankor_Mhyさんコメント、またサンプルをありがとうございます。いただいたサンプルのようにカラム落ちさせない設定をすると、画面からはみだしてしまうのですね。ブレイクポイント(@media screen and (max-width: 641px) まで小さくしてもロゴとメニューを1行に並べられるようにしたいのですが、もしかしたらロゴとメニューのfont-sizeを小さくしたら1列に並べられるのでは？と思いついたので試してみたいと思います。

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

あなたの回答