如何防止2个LinkBut​​ton被Repeater中的换行分隔？

Question

我有一个带有2个LinkBut​​tons的Repeater，它们需要彼此相邻显示才能构建一个图形单元。根据窗口大小，换行符会破坏该单元。我如何将这两个元素结合在一起？我正在摆弄div但结果是转发器的每个结果都显示在一个新行中，而我需要它们显示为水平。

    <asp:Repeater runat="server" id="RepeaterUsers" >
        <ItemTemplate>
        <div style="display:inline;">
        <div style="white-space:nowrap;">
        <asp:LinkButton ID="LB1" runat="server" OnClick="SelectUser"><asp:Label runat="server" Text='<%# Bind("Name") %>' ID="RepeaterName"/>
        </asp:LinkButton><asp:LinkButton ID="LB2" runat="server" OnClick="EliminateUser"><img src="img/close33.png"></asp:LinkButton></div><asp:Label runat="server" Text="&nbsp;&nbsp;" Height="24px" ID="LabelSpace"/></div>
        </ItemTemplate>
        </asp:Repeater>

最终的解决方案是：

            <asp:Repeater runat="server" id="RepeaterUsers" >
            <ItemTemplate>
                <div style="float:left">
                <table class="RepeaterTable">
                    <tr>
                        <td class="RepeaterTD">
                            <asp:LinkButton ID="ButtonHWReminderAudit" runat="server" OnClick="SelectUser" Font-Size="11px" CommandArgument='<%# Bind("Name") %>' CssClass='<%# Eval("CSSName") %>' ><%# Eval("DisplayName") %></asp:LinkButton></td>
                        <td class="RepeaterTD">
                            <asp:LinkButton ID="LinkButton4" runat="server" CommandArgument='<%# Bind("Name") %>' OnClick="EliminateUser" Font-Size="11px" CssClass='<%# Eval("CSSX") %>'>
                           <img src="img/close33.png" border="0" style="vertical-align:text-bottom;height:21px"></asp:LinkButton></td>
                        <td class="RepeaterTD">
                           <asp:Label runat="server" Text="&nbsp;&nbsp;" Height="25px" ID="LabelSpace"/></td>
                    </tr>
                </table>
                </div>
            </ItemTemplate>
        </asp:Repeater>

和CSS：

.RepeaterTable {border-spacing:0;border-collapse:collapse;float:left;}

.RepeaterTD {padding: 0px;}

• “名称”列带有空格，偶尔可能会导致一个单元格内的换行符。因此，我必须首先用不可破坏的空格（nbsp;）替换空格。
• 为了避免单元格之间的间隙，您必须将间距和填充设置为0.这将导致表格之间没有保持距离。为了设置水平和垂直距离，我添加了一个额外的单元格。

Answer 1

我认为您正在寻找float: left

<asp:Repeater runat="server" ID="RepeaterUsers">
    <ItemTemplate>
        <div style="float: left; margin-bottom: 24px; clear: both">
            <asp:LinkButton ID="LB1" runat="server"><%# Eval("Name") %></asp:LinkButton>
            <asp:LinkButton ID="LB2" runat="server"><img src="img/close33.png"></asp:LinkButton>
        </div>
    </ItemTemplate>
</asp:Repeater>

更新

您还可以使用table来对齐始终有效的项目。虽然这有点老派，反对HTML纯粹主义者。

<table cellspacing="0" cellpadding="3" border="0">
    <asp:Repeater runat="server" ID="RepeaterUsers">
        <ItemTemplate>
            <tr>
                <td>
                    <asp:LinkButton ID="LB1" runat="server"><%# Eval("Name") %></asp:LinkButton>
                </td>
                <td>
                    <asp:LinkButton ID="LB2" runat="server"><img src="img/close33.png"></asp:LinkButton>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>