按钮与空格相互放置

Question

我有6个按钮，我想把它们放在彼此之下，它们之间有空格，但似乎没有用。

这是我的观点：

   <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>

这是我的css：

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


}

这是一张它看起来像的图片：

Answer 1

您在#btnline2后错过了逗号：

#btnline1,
#btnline2
#btnline3,

修复此问题，并将clear: both添加到样式以强制它们分隔行：

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

Fiddle