ulの左余白
今日と明日とお休みいただいております。
最近あった事例。まず私の間違いから。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>challenge_box</title>
<link rel="stylesheet" href="challenge_box.css">
</head>
<body>
<h1>検索エンジン</h1>
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a></li>
<li><a href="http://www.bing.com/">bing</a></li>
</ul>
</body>
</html>
【CSS】
ul li {
list-style: none;
display: block;
border: solid 1px #000000;
margin-bottom: 15px;padding-left: 0px;
text-align: center;
background-color: #FFFACD;
font-size: 20px;
width: 200px;
}ul li a {
display: block;
padding: 4px;
}
背景色つけて四角く囲った検索エンジンのリスト達の左に余白があって左揃えにしたいのにいろいろやってみるも表示は変わらない....！
え、これ簡単なことなはずだよな...？やば、どうやるんだっけｗ
ってなって、結局レッスンでティーチャーに聞いた。
CSSの赤字部分が間違っていた。。
私はliに対して左パディングを0pxにしていたけれども、ulに対して左パディングを0pxにするのが正解でした。。
要するに、正しくは
ul {
padding-left: 0px;
}
ということだ！！
ふえええ。
なんでこんなことができなかったのか。。
あれ、でも待てよ？
なんかその時は納得してなんの疑問も持たずレッスンを終えたけれども、今になってなんでliに対しての指定じゃだめなんだ？？って思った。
え、しかもパディングなの？
あれ・・・なんでだっけ。。
ぐるぐる考えて深みにはまってしまった...初歩的なことだろうけど。。
ちょっと頭ん中整理しますね。。
まだまだだなあ、自分！泣
では新宿いってきまーーーーす。
