如何让两个按钮彼此相邻

Question

这是我的观点：

  <fieldset>
    <legend></legend>
    <br/>
      @using (Html.BeginForm("PrePayment", "Payment", FormMethod.Post))
      {
        <div align="left"> 
          <input id="btn" type="submit" value="Make a Payment" />
        </div>
      }
     @using (Html.BeginForm("DisplayLedger", "Customer", FormMethod.Post))
      {
        <div align="right"> 
          <input id="btn" type="submit" value="Display Activity" />
        </div>
      }
  </fieldset>

我试图让它们居中并且在彼此相邻的同一条线上。

这就是发生的事情：

我是css的新手，我尝试了几件事，但我似乎无法将它们放在同一条线上。

有人有什么想法吗？

Answer 1

这是一个简单的CSS问题。要对齐盒子，他们必须使用相同的浮子，在本例中为“left”。我在这里创建了一个可视化示例：http://jsfiddle.net/ktCng/

<div class="wrap">
    <div class="box left"></div>
    <div class="box left"></div>
</div>

<div class="wrap">
    <div class="box left"></div>
    <div class="box right"></div>
</div>​

.wrap{
  width: 200px;
  height: 100px;
  float: left;
  display: block;    
  border: 1px solid #000;    
}

.box{
 width: 50px;
 height: 50px;
 display: block;
}

.left{
  float: left;
  background: green;
}

.right{
  float: right;
  background: red;
}

Answer 2

仅解决样式问题。只是真的做了一个快速而讨厌的工作。

<fieldset>
    <legend></legend>
    <br/>
    <div style="text-align:center">
        @using (Html.BeginForm("PrePayment", "Payment", FormMethod.Post, new { style = "display:inline" }))
        {
          <input id="btn" type="submit" value="Make a Payment" />
        }
        @using (Html.BeginForm("DisplayLedger", "Customer", FormMethod.Post, new { style = "display:inline" }))
        {
          <input id="btn" type="submit" value="Display Activity" />
        }
    </div>
</fieldset>