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

Question

抱歉，如果之前有人问过这个问题。

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

有没有一种方法可以将 list 编号包含在列表项的边框内。

这是一个截图:

有什么办法吗？这是代码:

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