jqueryUIを使用して並べ替え可能なメニュー項目のリスト項目の境界にリスト番号を含める方法

Question

これは以前に尋ねられている場合は申し訳ありません。

私はjqueryUIを使用してソート可能な注文リストを作成しています。それは正常に動作していますが、私はいくつかのパディングと一緒に国境のリスト項目を追加しました。しかし、国境の外にあるので、数字は国境に含まれていません。

リスト項目の境界内にリスト番号を含める方法はありますか？ここで

はスクリーンショットです：

はこれを行う方法はありますか？

$(function() { 
 
    $("#sortable").sortable(); 
 
    $("#sortable").disableSelection(); 
 
});

#sortable { 
 
    background-color: #f5f5f5; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
 
    display: inline-block; 
 
    text-align: left; 
 
    cursor: move; 
 
    width: 100%; 
 
} 
 
#sortable li { 
 
    padding: 10px 20px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
} 
 
.list-group { 
 
    padding-left: 0; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <ol id="sortable" class="list-group"> 
 
    <li> 
 
     A Good MeaL 
 
    </li> 
 
    <li> 
 
     Nonsense 
 
    </li> 
 
    <li> 
 
     A Fine 
 
    </li> 
 
    <li> 
 
     A Devoted Scientist 
 
    </li> 
 
    <li> 
 
     A Rubbish Heap 
 
    </li> 
 
    <li> 
 
     A Technical Improvement 
 
    </li> 
 
    <li> 
 
     Blow Up an Airliner in Flight 
 
    </li> 
 
    <li> 
 
     Burn a Heretic at the Stake 
 
    </li> 
 
    <li> 
 
     A Short Circuit 
 
    </li> 
 
    <li> 
 
     By this Ring, I Thee Wed 
 
    </li> 
 
    <li> 
 
     A Baby 
 
    </li> 
 
    <li> 
 
     Torture a Person in a Concentration Camp 
 
    </li> 
 
    <li> 
 
     Love of Nature 
 
    </li> 
 
    <li> 
 
     A Madman 
 
    </li> 
 
    <li> 
 
     An Assembly Line 
 
    </li> 
 
    <li> 
 
     Slavery 
 
    </li> 
 
    <li> 
 
     A Mathematical Genius 
 
    </li> 
 
    <li> 
 
     A Uniform 
 
    </li> 
 
    </ol> 
 
</div>

Answer 1

ol

list-style: decimal inside; 

ワーキングデモ

$(function() { 
 
    $("#sortable").sortable(); 
 
    $("#sortable").disableSelection(); 
 
});

#sortable { 
 
    background-color: #f5f5f5; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
 
    list-style: decimal inside;// Added this one 
 
    text-align: left; 
 
    cursor: move; 
 
    width: 100%; 
 
} 
 
#sortable li { 
 
    padding: 10px 20px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
} 
 
.list-group { 
 
    padding-left: 0; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <ol id="sortable" class="list-group" type="1"> 
 
    <li class="alt"> 
 
     A Good MeaL 
 
    </li> 
 
    <li class="alt"> 
 
     Nonsense 
 
    </li> 
 
    <li class="alt"> 
 
     A Fine 
 
    </li> 
 
    <li class="alt"> 
 
     A Devoted Scientist 
 
    </li> 
 
    <li class="alt"> 
 
     A Rubbish Heap 
 
    </li> 
 
    <li class="alt"> 
 
     A Technical Improvement 
 
    </li> 
 
    <li class="alt"> 
 
     Blow Up an Airliner in Flight 
 
    </li> 
 
    <li class="alt"> 
 
     Burn a Heretic at the Stake 
 
    </li> 
 
    <li class="alt"> 
 
     A Short Circuit 
 
    </li> 
 
    <li class="alt"> 
 
     By this Ring, I Thee Wed 
 
    </li> 
 
    <li class="alt"> 
 
     A Baby 
 
    </li> 
 
    <li class="alt"> 
 
     Torture a Person in a Concentration Camp 
 
    </li> 
 
    <li class="alt"> 
 
     Love of Nature 
 
    </li> 
 
    <li class="alt"> 
 
     A Madman 
 
    </li> 
 
    <li class="alt"> 
 
     An Assembly Line 
 
    </li> 
 
    <li class="alt"> 
 
     Slavery 
 
    </li> 
 
    <li class="alt"> 
 
     A Mathematical Genius 
 
    </li> 
 
    <li class="alt"> 
 
     A Uniform 
 
    </li> 
 
    </ol> 
 
</div>

にこのスタイルを追加します。ここで コードです0