html - 如何使下拉列表彼此相邻，没有任何间距或填充

Question

我的下拉项目代码如下。我有填充:0。然而。它仍然在我的三个下拉列表项之间造成空格。我不希望有任何空间，并且所有这些都恰好是 150px 宽度。不知道为什么它还有空间。我想我想太多了。

<asp:DropDownList ID="DropDownList1" runat="server" Width="150px" style="padding:0">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" Width="150px"  style="padding:0">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" Width="150px"  style="padding:0">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList>

Answer 1

DropDownList 之间的空格来自标记中的空格(或换行符)。您可以尝试以下标记来删除它们:

<asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Borough</asp:ListItem>
    <asp:ListItem>ZipCode</asp:ListItem>
    <asp:ListItem>Address No</asp:ListItem>
    <asp:ListItem>Street</asp:ListItem>
    <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList><asp:DropDownList ID="DropDownList2" runat="server" Width="150px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Borough</asp:ListItem>
    <asp:ListItem>ZipCode</asp:ListItem>
    <asp:ListItem>Address No</asp:ListItem>
    <asp:ListItem>Street</asp:ListItem>
    <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList><asp:DropDownList ID="DropDownList3" runat="server" Width="150px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Borough</asp:ListItem>
    <asp:ListItem>ZipCode</asp:ListItem>
    <asp:ListItem>Address No</asp:ListItem>
    <asp:ListItem>Street</asp:ListItem>
    <asp:ListItem>Freeform</asp:ListItem>
</asp:DropDownList>

---

如果 Visual Studio 倾向于自动重新格式化它，将换行符放回到标记中，那么还有另一种方法，使用表格元素:

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:DropDownList ID="DropDownList2" runat="server" Width="150px">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:DropDownList ID="DropDownList3" runat="server" Width="150px">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Borough</asp:ListItem>
                <asp:ListItem>ZipCode</asp:ListItem>
                <asp:ListItem>Address No</asp:ListItem>
                <asp:ListItem>Street</asp:ListItem>
                <asp:ListItem>Freeform</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
</table>