change alignment from vertical to horizontal

Question

  <p style="text-align:left">
                      View Map <br />
                        <asp:DropDownList ID="ddlViewMapGroupName" runat="server"></asp:DropDownList>
                      </p>      

                      <p style="text-align:left">
                      Edit Map <br />
                        <asp:DropDownList ID="ddlEditMapGroupName" runat="server"></asp:DropDownList>
                      </p>

                      <p style="text-align:left">
                      Publish Map <br />
                        <asp:DropDownList ID="ddlPublishMapGroupName" runat="server"></asp:DropDownList>
                      </p>

shows:

View Map
//DDList

Edit Map
//DDList

Publish Map
//DDList

I would like to to look like:

View Map  Edit Map  Publish Map
//DDList  //DDList  //DDList

Is it something like auto? not sure any help appreciated. ta

Answer 1

You wouldn't want to wrap your items in paragraph tags to structure them, as the names suggests those are used to wrap paragraphs and those aren't formatted horizontally.

Instead you would be better suited to using a list, this allows you to change the formatting from vertical to horizontal easily.

So your HTML would be:

   <ul id="navlist">
    <li>
      <asp:DropDownList ID="ddlViewMapGroupName" runat="server">/asp:DropDownList>
    </li>
    <li>
    <asp:DropDownList ID="ddlEditMapGroupName" runat="server"></asp:DropDownList>
    </li>
    <li>
    <asp:DropDownList ID="ddlPublishMapGroupName" runat="server"></asp:DropDownList>
    </li>
    </ul>

and your CSS would be:

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 10px;
}

The main things in play here are the:

display: inline;
list-style-type: none;

Answer 2

It is not something automatic. But you can write a good old table and add it:

<table>
  <tr>
    <td>
      <asp:DropDownList ID="ddlViewMapGroupName" runat="server"></asp:DropDownList>
    </td>
    <td>
      <asp:DropDownList ID="ddlEditMapGroupName" runat="server"></asp:DropDownList>
    </td>
    <td>
      <asp:DropDownList ID="ddlPublishMapGroupName" runat="server"></asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      View Map
    </td>
    <td>
      Edit Map
    </td>
    <td>
      Publish Map
    </td>
  </tr>
</table>