以下の内容はhttps://cxememo.com/entry/li-tag-inline-float-indentより取得しました。


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

はてなブログにて、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>

原因・対応策

原因としては、全体にul {padding-inline-start: 40px;}が、記事内であれば.entry-content ul {margin: 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で書いているため、上書きする際は優先度に注意する必要があります。




以上の内容はhttps://cxememo.com/entry/li-tag-inline-float-indentより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14