Question

使用以下策略，我不能为我的生活找出如何设置ui-state-highlight div的宽度（在这里定义为ph，但是当我使用ui-state-highlight时结果是相同的）。这里所示的内容有效地改变了颜色，但宽度不受尊重。

它是一系列两个水平行的div。我想移动一个盒子而不是整个系列向左移动。看似占位符是样式的合适元素。它似乎是，因为颜色被div采用，但同样，宽度不是。

css ..

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#sortable1{
    border: 1px solid #999;
    min-width: 10px;
    min-height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li{
    display:inline;
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
.ph {
    display:block;
    min-height: 1px;
    line-height: 1.2em; 
    background: #ccc;
    width:120px;
}

html ..

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

和jquery ......

 <script>
     $(function() {
         $( ".connectedSortable" ).sortable({
              connectWith: ".connectedSortable",
              placeholder: "ph"
         }).disableSelection();
     });
</script>

Answer 1

您已为display:inline指定了<li>。内联元素不接受width或height。

如果您希望它们在尊重inline和width的同时表现得像height元素，则可以使用inline-block来解决问题。

Demo

样式化jquery可排序列表的ui-state-highlight

1 个答案: