<li>内リストマーカー後無駄な余白

<li>が思うようにならない

サイトでリストマーカーのすぐ隣に文章が来てほしいのに、
リストマーカーと文章の間にだいぶ隙間が空いてしまいます。
（写真赤色の部分のようになります）
cssの最初で、中央揃えとしているのでそれが効いてしまって、
そのようになっているのかと思ったのですが、
それを消すとページ全体にも影響してくる（中央揃えではなくなってしまう）
のでどうしたら良いかわかりません。助けてほしいです。

該当のソースコード

html, css

<body> <div class="page"> <div class="container"> <div class="logo"> <a href="https://＃/"><img src="images/logo b.png"></a> </div> <div class="header-list"> <ul> <li><a href="#" class="glay">お問い合わせ</a></li> <li><a href="#" class="glay">契約内容変更</a></li> </ul> </div> </div>

<p>「0-0は、もう要らない」</p>
<ul>
  <li>大きく“色”を変えた尚志、</li>
  <li>学法石川退けて2年連続福島県制覇!!</li>
  <li>6 選手権福島県予選決勝 尚志高 4-1 学法石川 西部サッカー場]</li>
</ul>

body {
margin:0px;
padding:0px;
text-align:center;
}
.page {
width: 1033px;
margin: auto;
padding:0px;
text-align:center;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-list ul {
display: flex;
}
.header-list li {
list-style: none;
font-size: 14px;
justify-content: space-between;
margin: 0 8px;
}

試したこと

liに対してmargin-left:0 や　padding-lesf:0 など試しましたが
何も変わりませんでした。

ryu_wtd.

2022/11/21 02:42

htmlのソースコードがなければ、適切な回答ができないので追記していただけると助かります。

pumpuco

2022/11/21 03:05

他の部分もあったのですが、外部に出すとまずいとおもったので、とりあえず抜粋した部分だけ掲載しました。よろしくお願いします。

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

回答1件

ベストアンサー

問題点

”text-align:center;”はインライン要素をそれが属しているブロック要素の中央に持ってくるという特性があります。それをbodyやpageクラスといった影響範囲の大きいものに適用すると、それに含まれる全てのインライン要素がブロック要素の中央に寄ってしまうため今回のような問題が起きてしまっています。
そのため、ブロック要素を中央に置きたいのであれば"text-align:center;"ではなく”margin: 0 auto;”を適切な場所に使って要素を中央に配置する必要があります。

改善案

body及びpageクラスから"text-align:center;"を削除し、header_listに含まれない方の<ul>タグにtext_listクラスを与え、そのクラスに"margin:0 auto;"を与えました。
こうすることでリストマーカーとリストの文章の間隔を崩さずにリストを中央に置けます。
”text-align:center;”や”margin: 0 auto;”は大きなブロックに対して大雑把に使うのではなく、中央に寄せたいブロックそれぞれに対して適切に使うようにしましょう

html,css
1<!DOCTYPE html>
2<head>
3<style>
4	
5	body {
6		margin:0px;
7		padding:0px;
8	}
9	.page {
10		width: 1033px;
11		margin: auto;
12		padding:0px;
13		display:flex;
14		justify-content: center;
15		flex-direction: column;
16	}
17	.container {
18		display: flex;
19		justify-content: space-between;
20		align-items: center;
21	}
22	.header-list ul {
23		display: flex;
24	}
25	.header-list li {
26		list-style: none;
27		font-size: 14px;
28		justify-content: space-between;
29		margin: 0 8px;
30	}
31
32	.text_list{
33		width:50%;
34		margin:0 auto;
35	}
36
37</style>
38</head>
39<body>
40	<div class="page">
41		<div class="container">
42			<div class="logo"> <a href="https://＃/"><img src="images/logo b.png"></a> </div>
43			<div class="header-list">
44				<ul>
45					<li><a href="#" class="glay">お問い合わせ</a></li>
46					<li><a href="#" class="glay">契約内容変更</a></li>
47				</ul>
48			</div>
49		</div>
50		<p>「0-0は、もう要らない」</p>
51		<ul class="text_list">
52			<li>大きく“色”を変えた尚志、</li>
53			<li>学法石川退けて2年連続福島県制覇!!</li>
54			<li>6 選手権福島県予選決勝 尚志高 4-1 学法石川 西部サッカー場</li>
55		</ul>
56</body>
57</html>