.list のwidthが効かない

###前提・実現したいこと
Monacaで商品を編集するシステムを作っています。
。#categoryはちゃんとwidthが効くのに対し.listはwidthが効かず図１のように二文字しか入らない横幅になりました。
どうすれば均等に並んでくれるのでしょうか
※現在Monacaは他のプロジェクトでいっぱいなので今回はxamppでプレビューしています

理想のUIはこんな感じ（図２）です
###発生している問題・エラーメッセージ

.list{   
    display: inline;
    display: block;
    border: 1px solid #9F99A3;
    background-color: #EEEEEE;
    text-decoration: none;
    color: #333;
    width:33%;
    text-align: left;
    font-size: 25px;
}

###該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/goods_edit_style.css">
10    <script>
11    </script>
12</head>
13<body>
14	<div id="header">
15        <img class="upicon1" src="menu.png">
16        <h1 id="title">商品を編集</h1>
17        <img class="upicon2" src="back.png">
18    </div>
19    <div id="menu">
20    </div>
21    <div class="a" id="main">
22        <div class="b" id="list">
23            <div class="list" id="a1">りんご</div>
24            <div class="list" id="a2">みかん</div>
25        </div>
26        <div class="b" id="category">カテゴリ</div>
27    </div>
28</body>
29</html>

css
1/**/
2body{
3    margin: 0px;
4    padding: 0px;
5}
6div img {
7    height:62px;
8    width:62px;
9    padding: 2px;
10}
11
12#header {
13    display: flex;
14    justify-content: space-between;
15}
16#header img{
17    margin-top:1%;
18}
19.list{   
20    display: inline;
21    display: block;
22    border: 1px solid #9F99A3;
23    background-color: #EEEEEE;
24    text-decoration: none;
25    color: #333;
26    width:33%;
27    text-align: left;
28    font-size: 25px;
29}
30
31.list{
32    float:left;
33}
34.b{
35    overflow: hidden;
36}
37/* clearfix */
38.b:before,
39.b:after {
40    content: "";
41    display: table;
42}
43.b:after {
44    clear: both;
45}
46#category{   
47    display: inline; 
48    display: block; 
49    border: 1px solid #9F99A3;
50    background-color: #EEEEEE;
51    text-decoration: none;
52    color: #333;
53    width:33.5%;
54    text-align: center;
55    font-size: 25px;
56}
57.b{
58    float:left;
59}
60.a{
61    overflow: hidden;
62}
63/* clearfix */
64.a:before,
65.a:after {
66    content: "";
67    display: table;
68}
69.a:after {
70    clear: both;
71}

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

回答1件

ベストアンサー

これを足す。

CSS
1.b {
2	width: 33%;
3}
4.list {
5	width: 100%;
6	box-sizing: border-box;
7}

下記部分は「display: inline;」が不要です。書いても下のものに上書きされるので、削除しましょう。また、「.b」など同じクラス名のものはまとめないとメンテナンス性が落ちます。

CSS
1.list{
2    display: inline;
3    display: block;
4}

投稿2017/07/09 09:58

kei344

総合スコア69400

rms398

2017/07/09 10:30

ありがとうございます。綺麗には並びましたが、商品が２列に並ばないのでそれは別の質問で投稿しようと思います。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

.list のwidthが効かない

関連した質問