Question

我有html表单和css，并排放置我的按钮。但我无法在按钮之间留出空间。

这是我的代码：

<html>
<body>

<div class="custom-buttons">



<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>


<p style="clear:floats"></p>

</div>


</body>
</html>

Answer 1

最简单的方法是为其中一个输入添加保证金。

Style="margin-right:30px;"

您可能会在这里看到输入之间30px空间的代码：http://jsfiddle.net/d6g66/

Answer 2

一个jsfiddle或者其他什么来表明它在行动中会很好或者至少是css，但是你应该调查http://necolas.github.io/normalize.css/以获得明确的修复并且不看你的css，你应该能够使用边距或填充。

Answer 3

为custom-button班级设置宽度，然后将第二个按钮更改为float:right

http://jsfiddle.net/v85sH/

宽度可以是像素，百分比，任何你喜欢的东西，两个按钮将均匀分布在左边和右边。右。

<强> CSS

.custombuttons {
    width:100%;
}
.firstbutton {
    float:left;
    color:#fff;
}
.secondbutton {
    float:right;
}

<强> HTML

<div class="custom-buttons">
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" class="firstbutton" value="paste2" />
    </form>
    <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
        <input type="submit" class="secondbutton" value="colSplit" />
    </form>
    <p style="clear:floats"></p>
</div>

Answer 4

在这种情况下，您希望将form元素设置为float。从那里，您可以为第一个form元素添加边距。

<html>
<body>

<div class="custom-buttons">

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>

</div>

</body>
</html>

无法在按钮之间留出空间

4 个答案: