CODEWITHSUNDEEP
c#asp.netalignmentvertical-alignment
John
John

Reputation: 3945

change alignment from vertical to horizontal

  <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

Upvotes: 0

Views: 144

Answers (2)

Andrei Olaru
Andrei Olaru

Reputation: 304

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>

Upvotes: 0

Ryan McDonough
Ryan McDonough

Reputation: 10012

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;

Upvotes: 0

Related Questions