html - div 中两个输入的绝对定位

Question

我有一个在页面上有固定位置的 div。它包含两个输入，但输入在 div 中的间距不等。

HTML

<div class="submit_content">
     <input class="btn" value="Cancel"/>
     <input class="btn" value="Save"/>
</div>

CSS

.submit_content {
    position: fixed;
    text-align: center;
    width: 50%;
    margin-left: 20px;
    right: 20px;
    background-color: blue;
    padding: 10px;
}

.submit_content input {
    width: 30%;
    height: 25%;
    margin: 0 auto;
    margin-right: 20px;
    text-align: center;
    padding: 5px;
}

如何使固定 div 内的两个输入等距？ jsfiddle demo显示它们悬停在更靠近左侧的位置，因为我设置了 margin-right。否则输入将紧挨着彼此。它们应该是分开的，但是div里面的间距应该还是相等的

Answer 1

很简单。右侧按钮也有一个 margin-right，因此(因为左侧按钮没有像右侧按钮那样的 margin-left)，它们的间距略有不同。

要解决此问题，请添加以下行:

.btn:last-child { margin-right:0; }

jsFiddle demo.