html、css、sp画面で<li>のランチとディナーを横並びに配置したいです。

前提・実現したいこと
ランチとディナーの文字を横並びにしたい

発生している問題
ランチとディナーの文字が重なって横並びにならない

該当のソースコード

html
1<body class="bagm">
2		<ul id="result_box">
3			<li class="inner_box">
4				<div class="icon_position">
5					<a href="#">
6						<dl>
7							<dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像">
8							</dt>
9							<dd class="reitem">再入荷</dd>
10						</dl>
11						<ul class="icon">
12							<li class="lunch" style="background:#fff;"></li>
13							<li class="dinner" style="background:#fff;"></li>
14						</ul>
15					</a>
16				</div>
17				<a href="#">
18					<div class="explanatory">
19						<h5 class="text_overflow">ブランド</h5>
20							<p>AAA</p>	
21					</div>
22				</a>
23			</li>
24			<li class="inner_box">
25				<div class="icon_position">
26					<a href="#">
27						<dl>
28							<dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像">
29							</dt>
30							<dd class="reitem">再入荷</dd>
31						</dl>
32						<ul class="icon">
33							<li class="lunch" style="background:#fff;"></li>
34							<li class="dinner" style="background:#fff;"></li>
35						</ul>
36					</a>
37				</div>
38				<a href="#">
39					<div class="explanatory">
40						<h5 class="text_overflow">ブランド</h5>
41							<p>BBB</p>	
42					</div>
43				</a>
44			</li>
45			<li class="inner_box">
46				<div class="icon_position">
47					<a href="#">
48						<dl>
49							<dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像">
50							</dt>
51							<dd class="reitem">再入荷</dd>
52						</dl>
53					</a>
54				</div>
55				<a href="#">
56					<div class="explanatory">
57						<h5 class="text_overflow">ブランド</h5>
58							<p>CCC</p>	
59					</div>
60				</a>
61			</li>
62		</ul>
63	</body>

css
1*,
2*::before,
3*::after {
4  box-sizing: border-box;
5}
6li {list-style:none;}
7
8#result_box {
9	display: flex;
10	flex-wrap: wrap;
11}
12#result_box .inner_box {
13	position: relative;
14	width: 33.3%;
15	border-bottom: 1px solid #ddd;
16	border-right: 1px solid #ddd;
17	-webkit-box-sizing: border-box;
18	box-sizing: border-box;
19	padding: 2px 0 2px 3px;
20}
21#result_box .inner_box:nth-of-type(3n) {
22	border-right: none;
23}
24.icon_position{
25	position: relative;	
26}
27.bagm .menu-img img {
28	width: 100%;
29	padding: 5px;
30	margin: 35px 0;
31}
32.explanatory {
33	box-sizing: border-box;
34	text-align: center;
35}
36.price_box {
37	margin:0.5rem 0;
38	font-size:1.1rem;
39}
40.icon li {
41	margin:0 0.3rem 0.3rem 0;
42	text-align:center;
43	line-height:1.5rem;
44	color:#757575;
45	border: solid 1px #757575;
46	font-size:1rem;
47	font-weight:bold;
48	top: 0;
49	left: 0;
50	position: absolute;
51}
52.bagm .icon li {
53	display:inline-block;
54	border-radius:1rem;
55	padding: 0.3em;
56	margin:0 0.3rem 0.3rem 0;
57	text-align:center;
58	line-height:1.5rem;
59	color:#757575;
60	border: solid 1px #757575;
61	font-size:1rem;
62	font-weight:bold;
63	top: 0;
64	left: 0;
65}
66.bagm .reitem {
67	position: absolute;
68	bottom: 0;
69	left: 0;
70	right: auto;
71	background: #fff;
72	padding: 0.1rem;
73	margin: 0 0 5px;
74	color: #FF0000;
75	border: solid 1px #FF0000;
76	font-size: 1.1rem;
77}
78.bagm .lunch:after{
79	content: "LUNCH";
80}
81.bagm .dinner:after{
82	content: "DINNER";
83}

試したこと
positionの変更やliにdisplayを記述するも崩れていくだけでわからなくなってしましました。
簡単なところでミスをしてるかと思うのですが、どうぞよろしくお願いします。

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

回答2件

ベストアンサー

li 要素に position: absolute; が付いているので、少なくとも.iconに付与すべきかなと。

CSS
1.icon li {
2    margin:0 0.3rem 0.3rem 0;
3    text-align:center;
4    line-height:1.5rem;
5    color:#757575;
6    border: solid 1px #757575;
7    font-size:1rem;
8    font-weight:bold;
9    /*
10    top: 0;
11    left: 0;
12    position: absolute;
13    */
14}
15.icon { /* ADD */
16    padding: 0;
17    top: 0;
18    left: 0;
19    position: absolute;
20}
21.bagm .icon li {
22    display:inline-block;
23    border-radius:1rem;
24    padding: 0.3em;
25    margin:0 0.3rem 0.3rem 0;
26    text-align:center;
27    line-height:1.5rem;
28    color:#757575;
29    border: solid 1px #757575;
30    /* font-size:1rem; */
31    font-size:.5rem;/* ADD */
32    font-weight:bold;
33    /*
34    top: 0;
35    left: 0;
36    */
37}
38```**動くサンプル：**[https://jsfiddle.net/mz7y4qo5/](https://jsfiddle.net/mz7y4qo5/)

投稿2019/08/04 16:59

kei344

総合スコア69398

kone_ri

2019/08/07 14:05

具体的に解決方法を教えて頂きましてありがとうございました。一番の問題はFlexboxだと思っておりましたがpositionの使い方だったんだとわかりました。

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

flexboxの子要素のdisplayはinline-flexにするべきかなと。
あとflexboxを使うときはその子要素，親要素のpositionは設定しない方が良いかと思います。
flexboxチートシート

投稿2019/08/04 17:29

編集2019/08/04 17:31

u-sho

総合スコア110

yoshinavi

2019/08/05 02:39

基本的にはCSSで言う<li>要素はブロック要素であり、内容的にも「display: flex;」が適していると思います。

kone_ri

2019/08/07 14:02

画像付きでわかりやすく本当にちーとシートでした。ご紹介ありがとうございました。親要素、子要素につきましてもご指摘頂いたとおり使い方に問題があります。よく使い方を覚えておきます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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

html、css、sp画面で<li>のランチとディナーを横並びに配置したいです。

関連した質問