web-dev-qa-db-ja.com

html ulliタグでインデントを作成する方法

箇条書きのテキストが含まれている順序なしリストがあります。リストアイテムを一列にインデントする必要があります。ただし、長時間実行されるテキストの場合、スタイルは期待どおりに機能しません。ボーダーボックス内に揃える必要があります。これがcssコードです

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc inside none;
    padding: 10px;
}

これがHTMLの例です

<div style="padding:20px">
    <ul>
        <li>Should be minimum of 8 characters</li>
        <li>A long running text A long running text A long running text A long running text A long running text</li>
        <li>Should have at least one number</li>
    </ul>
</div>

enter image description here

JS Fiddleリンク： http://jsfiddle.net/jHJXq/

htmlcsshtml-lists
9
bragboy

これはあなたが探しているものですか？ http://jsfiddle.net/jHJXq/3/

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc outside none;
    padding: 10px 10px 10px 25px;
}

リストのスタイルを「外側」に変更し、左側に追加のパディングを追加しました。

enter image description here

20
IMI

LIにスタイルを追加します：

li {
   margin-left:15px;  
}
7
Diodeus - James MacFarlane

リストスタイルを内側から外側に変更します

list-style: disc outside none;
2
Vitor Freitas
ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc;
    padding:10px;
}

li{
    margin-left:10px;
}
1
Stig Hausberg