JT4U JT4U - 10 months ago 28
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>