如何防止 2 个链接按钮在 Repeater 中被换行符分开？

Question

我有一个带有 2 个 LinkButton 的 Repeater，它们需要彼此相邻显示以构建图形单元。根据 window 大小，换行符将打破该单位。我如何将这两个元素联系在一起？我在摆弄 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;}

列 "Name" 带有白色 space ，这有时可能会导致一个单元格内出现换行符。因此，我必须先用不易碎的space (nbsp;) 替换 whitespace。
为了避免单元格之间出现间隙，您必须将间距和填充设置为 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>

如何防止 2 个链接按钮在 Repeater 中被换行符分开？

How to prevent that 2 LinkButtons get separeted by line break in Repeater?

html

asp.net

repeater