メニューバーにボーダーをつけて、かつレスポンシブにしたい。

●言語
HTML5、CSS3

●今の状態
liを使って横並びのメニューバーを作成しました。
4項目を作ってwidthを25%に設定し、レスポンシブにしました。

●やりたい事
メニュー項目にボーダーを設定して、メニューバーのボタンの周りに1pxの線を設置し、ボタンの境界線を作りたいのですが、それをやるとボーダーの線分の幅が増えて、100%を超えてしまい、横並びのリストの最後の一つが一つ下に改行されてしまいました。

●試した事
項目のwidthを25%未満にすると綺麗に4等分されなくなり、かつfloat: left;の影響でリスト全体が左に寄ってしまいました。リスト項目をdivで囲ってmargin: 0 auto;を設定してみましたが駄目でした。

●質問
画面の全横幅から指定のpx幅を引いた分を4等分し、その数値をリストのwidthに設定する事はできないでしょうか。もしくは、何か別の良い方法はないでしょうか。
よろしくお願い致します。

hatena19

2019/09/29 17:06

現状のHTML、CSSを提示してください。

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

回答3件

ベストアンサー

1pxのボーダーで囲むってことは、全部で5本必要なのかな？
完全に4等分するなら。

CSS
1li {
2  width:calc((100% - 5px) / 4);
3}

でいけると思います。

投稿2019/09/29 17:29

LibertyBell3

総合スコア1084

退会済みユーザー

2019/09/30 01:28

無事に解決致しました。ありがとうございました。他の回答者の方々も感謝致します。

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

box-sizing: border-boxは試されましたか？
普通にborderを追記するとborderの線の太さ分boxが大きくなってしまいます
【CSS】box-sizing:border-boxの使い方｜効かない時は？

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    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <style>
9        ul.fontsize0{
10            font-size: 0;
11        }
12        ul.fontsize0>li{
13            width: 25%;
14            display: inline-block;
15            box-sizing: border-box; /*ここがみそ*/
16            border: 1px solid black;
17            text-align: center;
18            font-size: 15px;
19        }
20        ul>li{
21            width: 25%;
22            display: inline-block;
23            box-sizing: border-box; /*ここがみそ*/
24            border: 1px solid black;
25            text-align: center;
26        }
27    </style>
28</head>
29<body>
30    <!-- みやすくなる分改行の隙間を削除するためulにfont-size: 0;を設定している -->
31    <ul class="fontsize0">
32        <li>メニュー1</li>
33        <li>メニュー2</li>
34        <li>メニュー3</li>
35        <li>メニュー4</li>
36    </ul>
37
38    <!-- 改行を入れると隙間が空いてしまいその分幅が太くなってしまう -->
39    <ul>
40        <li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li>
41    </ul>
42</body>
43</html>