前提・実現したいこと

表題の通りだとわかりにくいので下記のようなイメージ図のようにしたいです
width: calc(100%-40px*1);でulを全体に広げたいです。中央によりがちですが左右に調整させたい

](584bfca10ce01f9114d7f3f8d3c4fa0b.jpeg)

発生している問題・エラーメッセージ

エラーメッセージ

試したこと

width: calc(100%-40px1);でulを全体に広げたいです。→✖
news-itemにwidth: calc(50%-40px1/2);を設定したものの全体に広がらないため
aタグをblockに設定しましたができませんでした。

https://csshtml.work/img-width-bad/#1htmlwidth
も読んだのですが
解決できませんでした。

該当のソースコード

HTML
1 <section class="news">
2            <div class="ineer">
3                <div class="sec-theme aos-init aos-animate" data-aos="zoom-in">
4                    <img src="./img/logo02.png" alt="ロゴ">
5                    <p class="cmn-ttl">お知らせ</p><!-- /.cmn-ttl -->
6                </div><!-- /.sec-theme -->
7                <div class="news-link aos-init aos-animate" data-aos="zoom-in">
8                        <a href="#">
9                            <p class="sale-info">営業情報</p>
10                        </a>
11                        <a href="#"><p>その他</p></a>
12                      
13                </div><!-- /.news-link -->
14                <!--1-->
15                <ul class="news-list aos-init aos-animate" data-aos="fade-right">
16                    <li class="news-item">
17                        <a href="" class="">
18                            <img src="./img/news01.jpg" alt="news01">
19                            <div class="news-txt">
20                                <time>2020.12.24</time>
21                                <p class="news-desc">年末最後の営業日は27日になります。</p><!-- /.news-desc -->
22                            </div><!-- /.news-txt -->
23                        </a>
24                    </li><!-- /.news-item -->
25                    <li class="news-item">
26                        <a href="" class="">
27                            <img src="./img/news02.jpg" alt="news02">
28                            <div class="news-txt">
29                                <time>2020.12.24</time>
30                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
31                            </div><!-- /.news-txt -->
32                        </a>
33                    </li><!-- /.news-item -->
34                </ul><!-- /.news-list -->
35                <!--2-->
36                <ul class="news-list aos-init aos-animate" data-aos="fade-right" >
37                    <li class="news-item">
38                        <a href="" class="">
39                            <img class="news-img" src="./img/news02.jpg" alt="news02">
40                            <div class="news-txt">
41                                <time>2020.12.11</time>
42                                <p class="news-desc">12.21は臨時休業とさせていただきますので、 <br> よろしく お願いします。</p><!-- /.news-desc -->
43                            </div><!-- /.news-txt -->
44                        </a>
45                    </li><!-- /.news-item -->
46                    <li class="news-item">
47                        <a href="" class="">
48                            <img src="./img/news01.jpg" alt="news01">
49                            <div class="news-txt">
50                                <time>2020.12.24</time>
51                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
52                            </div><!-- /.news-txt -->
53                        </a>
54                    </li><!-- /.news-item -->
55                </ul><!-- /.news-list -->
56                <!--3-->
57                <ul class="news-list aos-init aos-animate" data-aos="fade-right" >
58                    <li class="news-item">
59                        <a href="" class="">
60                            <img src="./img/news01.jpg" alt="news01">
61                            <div class="news-txt">
62                                <time>202.12.01</time>
63                                <p class="news-desc">和室の改装を行いますため、12.10はお休み させていただきます。</p><!-- /.news-desc -->
64                            </div><!-- /.news-txt -->
65                        </a>
66                    </li><!-- /.news-item -->
67                    <li class="news-item">
68                        <a href="" class="">
69                            <img src="./img/news02.jpg" alt="news02">
70                            <div class="news-txt">
71                                <time>2020.12.24</time>
72                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
73                            </div><!-- /.news-txt -->
74                        </a>
75                    </li><!-- /.news-item -->
76                </ul><!-- /.news-list -->
77            </div><!-- /.ineer -->
78        </section><!-- /.news -->

CSS
1
2.news {
3  background-color: #ffffff;
4}
5
6.news-link {
7  display: -webkit-box;
8  display: -webkit-flex;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-pack: center;
12  -webkit-justify-content: center;
13      -ms-flex-pack: center;
14          justify-content: center;
15  -webkit-box-align: center;
16  -webkit-align-items: center;
17      -ms-flex-align: center;
18          align-items: center;
19}
20
21.news-link > a {
22  display: block;
23  margin: 46px 26px 49px;
24}
25
26.news .news-list {
27  display: -webkit-box;
28  display: -webkit-flex;
29  display: -ms-flexbox;
30  display: flex;
31  -webkit-box-pack: center;
32  -webkit-justify-content: center;
33      -ms-flex-pack: center;
34          justify-content: center;
35  width: calc(100%-40px*1);
36}
37
38.news .news-list .news-item {
39  background-color: #F6F6F6;
40  margin-top: 49px;
41  margin-bottom: 20px;
42  display: -webkit-box;
43  display: -webkit-flex;
44  display: -ms-flexbox;
45  display: flex;
46  -webkit-box-align: center;
47  -webkit-align-items: center;
48      -ms-flex-align: center;
49          align-items: center;
50}
51
52.news .news-list .news-item:nth-child(2n) {
53  margin-left: 40px;
54  width: calc(50%-40px*1/2);
55}
56
57@media screen and (min-width: 600px) and (max-width: 1179px) {
58  .news .news-list .news-item {
59    width: calc(50%-20px*1/2);
60  }
61}
62
63@media screen and (max-width: 599px) {
64  .news .news-list .news-item {
65    width: 100%;
66  }
67}
68
69.news .news-list .news-item > a {
70  display: -webkit-box;
71  display: -webkit-flex;
72  display: -ms-flexbox;
73  display: flex;
74}
75
76.news .news-list .news-item > a > img {
77  width: 80px;
78  height: 80px;
79  padding: 15px 10px;
80}
81
82@media screen and (max-width: 599px) {
83  .news .news-list .news-item > a > img {
84    width: 100px;
85    height: 100px;
86  }
87}
88
89.news .news-list .news-item > a .news-txt time {
90  padding: 15px 10px;
91}
92
93.news .news-list .news-item > a .news-txt .news-desc {
94  padding-top: 10px;
95}

Lhankor_Mhy

2021/10/05 01:07

「全体」というのは親要素全体のことでしょうか？そうだとすると、100%-40px*1 は必ず親要素より小さいので全体に広げることはできないです。

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

回答2件

こんな感じですか？

css
1<style>
2ul{
3  list-style:none;
4  display:flex;
5  flex-wrap:wrap;
6  justify-content:space-between;
7  padding:0px;
8}
9li{
10  display:block;
11  height:30px;
12  margin:0px;
13  width:calc(50% - 40px);
14  background-Color:gray;
15}
16li:nth-child(n+3){
17  margin-top:20px;
18}
19</style>
20<ul>
21<li>1</li>
22<li>2</li>
23<li>3</li>
24<li>4</li>
25<li>5</li>
26</ul>

調整

CSS
1<style>
2ul{
3  list-style:none;
4  display:flex;
5  flex-wrap:wrap;
6  justify-content:space-between;
7  padding:0px;
8}
9li{
10  display:block;
11  height:60px;
12  margin:0px;
13  max-width:calc(50% - 40px);
14  min-width:34%;
15  background-Color:gray;
16  word-break:break-all;
17}
18li:nth-child(n+3){
19  margin-top:20px;
20}
21</style>
22<ul>
23<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
24<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
25<li>3</li>
26<li>4</li>
27<li>5</li>
28</ul>