如何使用jqueryUI在可排序菜单项的列表项的边框中包含列表编号

Question

很抱歉，如果之前已经问过这个问题。

我正在使用jqueryUI制作可排序的有序列表。它工作正常，但我已经在边框中添加了列表项以及一些填充。但是这些数字不包括在边界内，因为它们位于边界之外。

有没有办法可以在列表项的边框内包含列表编号。

以下是截图：

有没有办法做到这一点？ 这是代码：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>