html - 如何为 和 <input> 按钮设置相同的样式

Question

我正在制作一排按钮:

<ul>
  <li><a href="#">Add</a></li>
  <li>
    <form ... method="post">
      <input class="Btn" type="submit" value="Update">
    </form>
  </li>  
  <li>
    <form ... method="post">
    <input class="Btn" type="submit" value="Delete">
    </form>
  </li>
  <li><a href="#">Search</a></li>
  <li><a href="#">Exit</a></li>
</ul>

使用CSS:

li {
  list-style: none;
  float: left;
  width: 80px;
}
li a {
  display: block;
  text-decoration: none;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  border-right: 1px solid #fff;
  color: #111;
}
.Btn {
  float: left;
  width: 100px;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  border-right: 1px solid #fff;
  color: #111;
}

我有两个问题:

a) <a> 的形状和 <input>按钮略有不同，并且没有完全对齐。

b) <input> 的字体按钮不同于<a> .

我怎样才能让它们看起来完全一样并且完美对齐？

Answer 1

在这里，试一试:

li {
  list-style: none;  
  display:inline;
  float:left;
}
.Btn,li a {
  width: 100px;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  color: #111;
  text-decoration:none;
  display:inline-block!important;
  border:none;
  line-height:18px;
  font-size:16px;
  margin-right:2px;
  font-family:Arial;  
  margin-top:0;
}

工作示例:http://jsfiddle.net/7gdzkc1v/1/