如何实现带相邻文本框的双列CheckBoxList（ASP.NET/HTML）

1. 添加问题文本行 #

在现有表格中新增一行放置问题描述，和下方复选框列表保留合适间距，明确引导用户操作。

2. 拆分复选框列表与自定义最后一项 #

原CheckBoxList无法直接在单个选项旁嵌入文本框，因此将前6个选项保留在CheckBoxList中实现两列布局，最后一个复选框和文本框手动构造，保证文本框紧跟在复选框右侧。

完整调整后代码 #

<table runat="server" ID="tblQuestionnaire3b">
    <!-- 问题文本行 -->
    <tr>
        <td style="font-size:15px; padding-bottom:10px; white-space:nowrap;">
            请选择您使用的狩猎工具：
        </td>
    </tr>
    <tr>
        <td style="padding-right:20px; padding-bottom:40px; font-size:15px;">
            <!-- 前6个复选框，自动分两列显示 -->
            <asp:CheckBoxList runat="server" ID="chkAnswer7" RepeatColumns="2" 
                CssClass="rblSpace" RepeatDirection="Vertical">
                <asp:ListItem Value="1" Text="[Compound bow]"></asp:ListItem>
                <asp:ListItem Value="2" Text="[Recurve bow]"></asp:ListItem>
                <asp:ListItem Value="3" Text="[Crossbow]"></asp:ListItem>
                <asp:ListItem Value="4" Text="[Shotgun]"></asp:ListItem>
                <asp:ListItem Value="5" Text="[In-line muzzleloader]"></asp:ListItem>
                <asp:ListItem Value="6" Text="[Primitive muzzleloader]"></asp:ListItem>
            </asp:CheckBoxList>
            <!-- 最后一个复选框+文本框，手动对齐布局 -->
            <div style="margin-top:8px;">
                <asp:CheckBox runat="server" ID="chkRifle" Value="7" />
                <label for="<%= chkRifle.ClientID %>">[Rifle (please enter caliber:22, 30, etc.)]</label>
                <asp:TextBox runat="server" ID="txtAnswer7" CssClass="txtboxSpace" Width="80pt" />
            </div>
        </td>
    </tr>
</table>

配套CSS样式（添加到页面