JT4U JT4U - 4 months ago 8
HTML Question

How to make drop down lists next to each other without any spacing or padding

The Image Click here.

my code for the drop down items is below. i have padding:0. however. it is still causing a space in between my three drop down list items. i want no space and for all of them to be exactly 150px width. not sure why it still has a space. I guess i am thinking too much.

<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

The space between the DropDownLists comes from the spaces (or line breaks) in the markup. You can try the following markup to remove them:

<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>


If Visual Studio tends to reformat it automatically, putting the line breaks back in the markup, here is another way to do it, using a table element:

<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>
Comments