清单中的一项有一个相邻的文本框

Question

希望有人能教我如何做到这一点 html/asp.net。以下是我的预期输出：

问题有一行。下面是两列的清单，最后一项旁边有一个文本框。

抱歉，我不太擅长 UI。如果有人可以指导我如何实现这一目标。谢谢！

<Table runat="server" ID="tblQuestionnaire3b">
        <tr>
            <td Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <asp:CheckBoxList runat="server" ID="chkAnswer7" RepeatColumns="2" CssClass="rblSpace">
                    <asp:ListItem Value="1" Text="[Compound bow]"/>
                    <asp:ListItem Value="2" Text="[Recurve bow]"/>
                    <asp:ListItem Value="3" Text="[Crossbow]"/>
                    <asp:ListItem Value="4" Text="[Shotgun]"/>
                    <asp:ListItem Value="5" Text="[In-line muzzleloader]"/>
                    <asp:ListItem Value="6" Text="[Primitive muzzleloader]"/>
                    <asp:ListItem Value="7" Text="[Rifle (please enter caliber:22, 30, etc.)]">                           
                    </asp:ListItem>
                </asp:CheckBoxList>
    <TextBox runat="server" ID="txtAnswer7" CssClass="txtboxSpace" width="80pt" />                   
            </td>                 
        </tr>
    </Table>

Answer 1

我会放弃使用一些表格进行布局。

但是，将文本框移出表格，并使用简单的“br”开始下一行也可以。

但是，最简单的布置方式是什么？

使用我所说的幼儿园街区的想法。

所以，每个div都是一个块。您希望该块浮动到现有内容的左侧，还是开始一个新行？

那么，说这 2 个 div：

因此，您只需开始将这些“块”放入表单中即可。

所以，这个：

        <div id="block1" style="float:left;background-color:lightcoral;float:left">
            <h3>this is my block 1</h3>
            <p>This is some fun text</p>
        </div>


        <div id="block2" style="float:left;background-color:lightblue;float:left">
            <h3>this is my block 2</h3>
            <p>This is some fun text</p>
        </div>

结果：

比如说，我想要一些空间，那么这是第二个块：

        <div id="block2" style="float:left;background-color:lightblue;float:left;margin-left:30px">
            <h3>this is my block 2</h3>
            <p>This is some fun text</p>
        </div>

所以，我把它提高了 30 像素以上。因此：

它使您的页面“响应式”，无需各种手持支架。

并且，希望第二个块从新的/下一行开始？

然后在两个块之间放入一个 div，如下所示：

        <div id="block1" style="float:left;background-color:lightcoral;float:left">
            <h3>this is my block 1</h3>
            <p>This is some fun text</p>
        </div>

        <div style="clear:both"></div>


        <div id="block2" style="float:left;background-color:lightblue;float:left">
            <h3>this is my block 2</h3>
            <p>This is some fun text</p>
        </div>

因此：

并在块之间添加一些空间？

        <div style="clear:both;height:20px"></div>

现在：

那么，用这个非常简单的概念将您的“div”视为幼儿园街区？然后你就开始在网页上扔块。

将它们向左浮动，它们就会穿过页面。

想要开始一个新行，然后放入该 div 并清除两者。

那么，通过上述人类历史上最简单的网页设计方法？

而且超级简单又超级简单？

然后我们只需将您的第一个复选框列表放入 div 中，然后根据清除两个技巧在下面开始更多内容。 因此，你的标记变成这样：

        <div style="float:left">
            <asp:CheckBoxList runat="server" ID="chkAnswer7" RepeatColumns="2" CssClass="rblSpace">
                    <asp:ListItem Value="1" Text="[Compound bow]"/>
                    <asp:ListItem Value="2" Text="[Recurve bow]"/>
                    <asp:ListItem Value="3" Text="[Crossbow]"/>
                    <asp:ListItem Value="4" Text="[Shotgun]"/>
                    <asp:ListItem Value="5" Text="[In-line muzzleloader]"/>
                    <asp:ListItem Value="6" Text="[Primitive muzzleloader]"/>
                    <asp:ListItem Value="7" Text="[Rifle (please enter caliber:22, 30, etc.)]">                           
                    </asp:ListItem>
                </asp:CheckBoxList>
        </div>

        <div style="clear:both;height:10pt"></div>

        <div style="float:left">

            <asp:TextBox runat="server" ID="txtAnswer7"  width="80pt" />                   

        </div>

因此：

但这才是真正酷的部分。假设您改变主意，并且希望文本框和其他一些内容位于复选框列表的右侧？

然后删除两者，并添加一些左边距

这样说：

    <div style="float:left">
        <asp:CheckBoxList runat="server" ID="chkAnswer7" RepeatColumns="2" CssClass="rblSpace">
                <asp:ListItem Value="1" Text="[Compound bow]"/>
                <asp:ListItem Value="2" Text="[Recurve bow]"/>
                <asp:ListItem Value="3" Text="[Crossbow]"/>
                <asp:ListItem Value="4" Text="[Shotgun]"/>
                <asp:ListItem Value="5" Text="[In-line muzzleloader]"/>
                <asp:ListItem Value="6" Text="[Primitive muzzleloader]"/>
                <asp:ListItem Value="7" Text="[Rifle (please enter caliber:22, 30, etc.)]">                           
                </asp:ListItem>
            </asp:CheckBoxList>
    </div>


    <div style="float:left;margin-left:20px;border-color:black;border:solid;padding:10px">
        <h4>Some fun content to the right</h4>
        <asp:TextBox runat="server" ID="txtAnswer7"  width="80pt" />                   
    </div>

因此，你得到这个：

所以，开始删除“div”，并保持浮动它们。如果您的浏览器是缩小版，请注意浮动 div 是如何向下层叠的。

因此，通过上述简单的 div 块方法，您可以非常自由地构建您想要的任何布局，并且不需要凌乱的引导列，也不需要一些用于布局的表格。

事实上，抓住一些子块，将它们放在桌子上，然后用它们来布局东西。放下一块。现在，是右边或下方的下一个街区。

所以，现在你的布局就变成了小孩子的游戏，你只需要了解 float:left 并清除两者即可。