CODEWITHSUNDEEP
htmlcssasp.net-mvc-5
Roro
Roro

Reputation: 117

Buttons placed underneath each other with spaces

I have 6 buttons which I would like to place underneath each other with spaces in between them but it seems to not be working.

this is my view:

   <div id="btnline1">
    <a href="@Url.Action("Create","Purchase",null)" class="btn2">Create an Order</a>
</div>
      <div id="btnline2">
    <a href="@Url.Action("Index","Purchase",null)" class="btn2">Mangage Orders</a>
     </div>

        <div id="btnline3">
            <a href="@Url.Action("Index","Driver",null)" class="btn2">Manage Drivers </a>
        </div>

        <div id="btnline4">
            <a href="@Url.Action("Index","Equipment",null)" class="btn2">Manage Equipments</a>
        </div>
        <div id="btnline5">
            <a href="@Url.Action("Index","Customer",null)" class="btn2">Manage Customers</a>
        </div>

        <div id="btnline6">
            <a href="@Url.Action("Index","Report",null)" class="btn2">Reports</a>
        </div>

and this is my css:

#btnline1,
#btnline2
#btnline3,
#btnline4,
#btnline5,
#btnline6
{
    float: right;
  margin-bottom: 10px;


}

here is an image of what it looks like:

Screen

Upvotes: 0

Views: 198

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You're missing a comma after #btnline2:

#btnline1,
#btnline2
#btnline3,

Fix that, and add clear: both to the styles to force them to separate lines:

#btnline1,
#btnline2,
#btnline3,
#btnline4,
#btnline5,
#btnline6
{
  float: right;
  margin-bottom: 10px;
  clear: both;           //add this
}

Fiddle

Upvotes: 1

Related Questions