asp:BulletedList <ul>清空时未对齐

Question

我有两个asp:在div "style=display:table“中的BulletedList。其想法是其中一个将包含asp:ListItems，用户可以在它们之间拖放，以创建另一个选定项的列表。

这是代码

<div style="width:90%; display:table; border:1px solid green">
    <div style="width:100%; display:table-row">
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blAvailableDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="red">
                <asp:ListItem Text="AvailableLI1">
                </asp:ListItem>
                <asp:ListItem Text="AvailableLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
        <div style="width:30%; display:table-cell; text-align:center">
            <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" /><br /><br />
            <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" />
        </div>
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blSelectedDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="Gray">
                <asp:ListItem Text="SelectedLI1">
                </asp:ListItem>
                <asp:ListItem Text="SelectedLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
    </div>
</div>

很简单，对吧？这里还有这个JQuery，它允许在每个列表中重新排序，并在它们之间拖放。

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

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").disableSelection();
    });

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });
    });

    function Move(element, from, to)
    {
        var fromBL = document.getElementById(from);
        var toBL = document.getElementById(to);
        var newLI = document.createElement("li");
        newLI.innerHTML = element.innerHTML;
        fromBL.removeChild(element);
        toBL.appendChild(newLI);
    }

元素是否有ID的条件是阻止列表本身被拖动，我认为它是错误的，这做了我需要的事情，但仅供参考，我的问题发生在没有ID的情况下。

(还不能在这里张贴照片......是有原因的)

https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/946310_10151467867553519_1667792056_n.jpg

拖放工作正常，除了...当我拖放时，两个BulletedLists中都没有剩余的ListItems，就会发生这种情况。

https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/945900_10151467867548519_1597804249_n.jpg

如果你有任何想法，请多多指教。

Answer 1

答案是多么简单，而且更令人恼火--以至于没有人告诉我。

我没有使用display:table/row/cell，而是使用了float:left、float:right和margin:auto作为中心

    <div style="width:35%; border:1px solid gray; float:left">
        <asp:BulletedList runat="server" ID="blAvailableDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:35%; border:1px solid gray; float:right">
        <asp:BulletedList runat="server" ID="blSelectedDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:30%; text-align:center; margin:auto">
        <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" UseSubmitBehavior="false" /><br /><br />
        <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" UseSubmitBehavior="false" />
    </div>

我花了三天时间……三天！