文章を1行で表示させたい

【現状】
![

【見本】

現状2行で表示されている「スイッチエデュケーション」や擬似要素の「2019.04.29」を見本の画像ように1行で表示させたいです。

【試したこと】
widthの幅を100%にする

HTML
1      <section>
2        <div class="news">
3          <h2 class="news-heading">NEWS</h2>
4            <div>
5              <div class="news-box">
6                <a class="news-link" href="#">
7                  <p id="news-title1" class="news-title">スイッチエデュケーション</p>
8                  <p class="news-date">2019.04.29</p>
9                  <p class="news-text">株式会社144Lab（以下144Lab、本社：東京新宿区）はInsightSIP SAS（以下InssighSIP…）</p>
10                </a>
11                
12                <a class="news-link" href="#">
13                  <p  id="news-title2" class="news-title">144Lab</p>
14                  <p class="news-date">2019.04.29</p>
15                  <p class="news-text">株式会社144Lab（以下144Lab、本社：東京新宿区）はInsightSIP SAS（以下InssighSIP…）</p>
16                </a>
17      
18                <a class="news-link" href="#">
19                  <p id="news-title3" class="news-title">スイッチサイエンス</p>
20                  <p class="news-date">2019.04.29</p>
21                  <p class="news-text">株式会社144Lab（以下144Lab、本社：東京新宿区）はInsightSIP SAS（以下InssighSIP…）</p>
22                </a>

CSS
1  /* news */
2
3  .news {
4    padding-bottom: 80px;
5  }
6  
7  .news-link {
8    display: flex;
9    background-color: #F2F3F7;
10    margin-bottom: 10px;
11    padding: 50px 0;
12    text-decoration: none;
13    margin-left: 200px;
14    margin-right: 200px;
15  }
16  
17  .news-title {
18    margin: 0 20px;
19    padding: 10px 20px;
20    display: flex;
21  }
22  
23  #news-title1 {
24    color: orange;
25    border: solid 1px orange;
26    width: 260px;
27    display: flex;
28    justify-content: center;
29  }
30  
31  #news-title2 {
32    color: red;
33    border: solid 1px red;
34    width: 260px;
35    display: flex;
36    justify-content: center;
37  }
38  
39  #news-title3 {
40    color: skyblue;
41    border: solid 1px skyblue;
42    width: 260px;
43    display: flex;
44    justify-content: center;
45  }
46  
47  #news-title4 {
48    color: lightgreen;
49    border: solid 1px lightgreen;
50    width: 260px;
51    display: flex;
52    justify-content: center;
53  }
54  
55  .news-date::after {
56    content: "｜";
57    padding: 0 20px;
58  }
59  
60  .news-text::after {
61    content: "　≻";
62  }
63

Lhankor_Mhy

2021/03/12 07:10

現状と見本の横幅が明らかに違うんですが、ご質問は「幅を広げたい」ということでしょうか？

Lhankor_Mhy

2021/03/12 07:29

コミュニケーションができないタイプの人か……

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

回答2件

自己解決

font-sizeの変更

CSS
1 .news-link {
2    display: flex;
3    background-color: #F2F3F7;
4    margin-bottom: 10px;
5    padding: 30px 0px;
6    text-decoration: none;
7    margin-left: 170px;
8    margin-right: 170px;
9    font-size: 0.7rem;
10  }

投稿2021/03/12 07:27

momo429

総合スコア9

幅を広げたい、という質問だと読みました。

css
1.news-link {
2    display: flex;
3    background-color: #F2F3F7;
4    margin-bottom: 10px;
5    padding: 50px 0;
6    text-decoration: none;
7/*    margin-left: 200px;
8    margin-right: 200px;  余白があると幅が狭くなるので取る */
9  }
10
11  .news-title {
12    margin: 0 20px;
13    padding: 10px 20px;
14    display: flex;
15  }
16
17  #news-title1 {
18    color: orange;
19    border: solid 1px orange;
20    /* width: 260px; */
21    width: 192px;
22    display: flex;
23    justify-content: center;
24  }
25
26  #news-title2 {
27    color: red;
28    border: solid 1px red;
29    /* width: 260px; */
30    width: 192px;
31    display: flex;
32    justify-content: center;
33  }
34
35  #news-title3 {
36    color: skyblue;
37    border: solid 1px skyblue;
38    /* width: 260px; */
39    width: 192px;
40    display: flex;
41    justify-content: center;
42  }