くぜのメモ

メモのように色々なことを書いていく雑記ブログ

【はてなブログ】リストの横並びで右にずれてしまう事象の対応

背景

display: flex;などでリスト(<ul><li>タグ)を横並びにさせる際、意図しない謎のインデント(空白)が入ってしまい、位置が右にずれる。

以下は、ずれている例。タイトルや見出しと比べて、横並びの数字のリストが右にずれている。

ずれている例

<style>
    ul {
        display: flex;
        list-style-type: none;
    }
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

原因・対応策

原因としては、ulpadding-inline-start: 40px;が、記事内であれば.entry-content ulmargin: 0 0 1em 1.5em;(margin-left: 1.5em;)が設定されているため。(記事内はpadding: 0;で設定を上書きしているが、新規でmargin-left: 1.5m;が設定されている)

使用しているブログデザイン次第なところはあるが、このような事象が発生する理由は大抵このあたりが原因のはず。

対応としては、右にずらしたくないリストのulにクラスを設定し、そのクラスに対してpadding-left: 0;margin-left: 0;を設定する。

ただし、記事内においてはデフォルト設定が.entry-content ulで書いているため、上書きする際は優先度に注意する必要あり。