width: 20%; で5つの要素を横並びにしようとすると二行になってしまう。

html
1 　　　　<div class="main-menu">
2          <div class="home">
3            <a class="menu" href="#">aaaaaaa</a>
4            <p>aaaaa</p>
5          </div>
6          <div class="clinic">
7            <a class="menu" href="#">bbbbbbb</a>
8            <p>aaaaaa</p>
9          </div>
10          <div class="servece">
11            <a class="menu" href="#">ccccccc</a>
12            <p>aaaaaa</p>
13          </div>
14          <div class="staff">
15            <a class="menu" href="#">dddddddd</a>
16            <p>aaaaaaaa</p>
17          </div>
18          <div class="access">
19           <a class="menu" href="#">eeeeeee</a>
20           <p>aaaaaaaaaa</p>
21          </div>
22        </div>

css
1.main-menu {
2	position: relative;
3}
4
5.menu {
6	display: block;
7	background-color: #1fddda;
8	opacity: 0.8;
9	border: 0.5px solid  #8af7f5;
10	color: white;
11	height: 80px;
12	border-radius: 4px;
13	text-align: center;
14	line-height: 70px;
15	text-decoration: none;
16	font-weight: bold;
17	font-size: 15px;
18	float: left;
19	width: 20%;
20}
21
22.menu:hover {
23	background-color: #20c4c1;
24	transition: all 0.5s;
25}
26
27.main-menu p {
28	position: absolute;
29	top: 50px;
30	padding-left: 74px;
31}

模写をしているのですが上のコードのようにすると、width: 20%; で　float:left; となっているのに、menuクラスが2行になってしまいます。どうすれば一行で表示できるでしょうか。ご教授お願いします。(一応著作権とかこわいので文字とかはかえてあります)

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

回答2件

前の方の回答通り、ボーダー幅分親の幅より大きくなるので折り返しが発生します。calcでボーダー幅分を引いてもいいのですが、ボックスサイズの計算法をボーダーやパディングを含むものに修正すればいいでしょう。

css
1.menu {
2
3    /* 略 */
4
5    box-sizing: border-box; /* 追加 */
6}

ただし、float:left; で横並びさせたり、position: absolute; で位置決めする方法ではいろいろ複雑になるので、またトラブルが出てくるでしょう。

今なら横並びは、FlexBoxでするのがベストでしょう。下記はFlexBoxを使った一例です。

css
1.main-menu {
2  display: flex; 
3}
4.main-menu > div {
5  width: 20%;
6  position: relative;
7}
8
9.menu {
10  display: block;
11  background-color: #1fddda;
12  opacity: 0.8;
13  border: 0.5px solid  #8af7f5;
14  color: white;
15  height: 80px;
16  border-radius: 4px;
17  text-align: center;
18  line-height: 70px;
19  text-decoration: none;
20  font-weight: bold;
21  font-size: 15px;
22  width: 100%;
23}
24
25.menu:hover {
26  background-color: #20c4c1;
27  transition: all 0.5s;
28}

投稿2021/01/30 12:15

編集2021/01/30 12:19

hatena19

総合スコア34022

jinjinjimajima

2021/01/30 12:23

回答ありがとうございます。この方法も経験値として覚えておきます。

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

ベストアンサー

widthが各20%ということは、5つで100%となるはずです。
つまり、borderが0.5pxあると、合計が100%と2.5pxと、2.5px分はみ出してしまいます。
そのため、2行になってしまっているのではないでしょうか。
修正後(borderをなくす場合)

css
1.menu {
2    display: block;
3    background-color: #1fddda;
4    opacity: 0.8;
5    color: white;
6    height: 80px;
7    text-align: center;
8    line-height: 70px;
9    text-decoration: none;
10    font-weight: bold;
11    font-size: 15px;
12    float: left;
13    width: 20%;
14}

修正後(borderを入れる場合)

css
1.menu {
2    display: block;
3    background-color: #1fddda;
4    opacity: 0.8;
5    border: 0.5px solid  #8af7f5;
6    color: white;
7    height: 80px;
8    border-radius: 4px;
9    text-align: center;
10    line-height: 70px;
11    text-decoration: none;
12    font-weight: bold;
13    font-size: 15px;
14    float: left;
15    width: calc(20% - 0.5px);
16}