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

Question

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>

You can try `margin: 0` (or `margin-left: 0; margin-right: 0` if you want to keep the top and bottom margins). — ConnorsFan, Jul 20 '16 at 16:05
remove padding and just have margin as 0. i tried it still looks like the image i just added to the question. i tried your edit as well still the same output as the image above — JT4U, Jul 20 '16 at 16:06
i tried it with the comment above its still the same. Here is my code. `` and the other `` — JT4U, Jul 20 '16 at 16:13
I found something that works in Firefox but not in Chrome. This is strange... — ConnorsFan, Jul 20 '16 at 16:34
oh wow. haha. this is why the browser gods told us not to have too many browsers or thy developers shall suffer — JT4U, Jul 20 '16 at 16:37

ConnorsFan · Accepted Answer · 2016-07-20T16:52:40.963

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>

oh wow so the > tag and another <> tag had to be in the same line. Wow thats genius man. Thanks. — JT4U, Jul 20 '16 at 16:47
I've used this solution to replace messy things like negative margins or positioning. — Graham, Jul 20 '16 at 16:51
i tried the table element but it kept giving me an html warning. but i just tried your example. made my html look so much cleaner. thanks @ConnorsFan — JT4U, Jul 20 '16 at 16:53

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

1 Answers1