CSSでリストにインデントを保持する方法は？

Question

私は次のコードを持っている：

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    line-height: 34px; 
 
    list-style-position: inside; 
 
}

<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

をあなたが見ることができるようにリスト項目は、これまで二行目までになった場合、それは/ lipaddingを失い、JsFiddle

を参照してください。 margin。

次の行を最初の行まで一致させる方法はありますか？

Answer 1

あなたはli

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li { 
 
    text-indent: -1em 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    line-height: 34px; 
 
    list-style-position: inside; 
 
}

<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

0で text-indent:-1emを使用することができ li:before

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    margin-left:-20px; 
 
    line-height: 34px; 
 
    list-style-position:inside; 
 
}

<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

別の解決策にmargin-left:-20pxを追加することができます

Answer 2

これを行う方法の1つがここにあります。左のパディングをli要素に追加し、絶対配置を使用してマーカーを左にシフトします。

このアプローチでは、マーカーの位置を多く制御できます。 また、マーカー要素のサイズやスタイルを変更すると、マーカーの位置は安定したままになります。

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li { 
 
    padding-left: 15px; 
 
    position: relative; 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: @green; 
 
    margin-right: 0px; 
 
    line-height: 34px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

Answer 3

は.page-content ulに単にmargin-left: -20px;margin-left: 20px;
、.page-content li:beforeに、オプションを追加します。

パディング＃1：https://jsfiddle.net/swrufhzc/2/
パディング＃2：https://jsfiddle.net/swrufhzc/3/