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

您可以通过将此css添加到代码中来实现此目的：

<强> CSS

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

在fiddle中查看它。

Answer 2

很简单。右键也有一个margin-right，因此（由于左键没有像右键那样的margin-left），它们的间距会有所不同。

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

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

<强> jsFiddle demo.

Answer 3

将此添加到您的CSS

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

div中两个输入的绝对定位

3 个答案:

DEMO