Question

我在两个按钮之间有一个小差距，我无法处理它，试图查看浏览器终端，但这没有帮助。这是按钮：

<div class="secondTableVRow">
    <input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/>
    <input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>

CSS：

.secondTableVRow{
    width:318px;
    background-color:green;
    display:inline-block;
}

#submit{
    cursor:pointer;
    display:inline-block;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width:156px;
    height:35px;
    outline:none;
    border:none;
    background-color:#DDDDDD;
    -webkit-transition: background-color 0.4s linear 0s;
    -moz-transition: background-color 0.4s linear 0s;
    -o-transition: background-color 0.4s linear 0s;
    transition: background-color 0.4s linear 0s;
 }

两个按钮都有相同的CSS，我知道我应该使用类，我会，只是想先解决这个问题。按钮的实例：http://www.diligencehelps.com/php_includes/register_form.php 在表单中的每个元素之后似乎有一个小的差距，为什么会发生这种情况？如果需要更多的代码，请问。

Answer 1

试试这个：

        <div class="secondTableVRow">
            <input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/><!--
            --><input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
        </div>

HTML对于空格非常挑剔。

有关更多背景信息，请查看以下内容：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

添加：

.secondTableVRow:last-of-type {
    font-size: 0;
}

#submit, #extend {
    width: 159px;
}

空间是由于空格 - HTML将换行符解释为空格。 font-size: 0处理这个问题，但在#submit和#extend填充其父.secondTableVRow容器时，在右侧留下了一些额外的空间。您也可以使用width: 50%代替159px。

:last-of-type是为了避免将font-size: 0应用于标记中较早的.secondTableVRow，但您可以只为最后一个提供一个ID（或其他类.final 1}}而是选择它，例如.secondTableVRow.final { font-size: 0; }。

编辑：正如Hauke在评论中提到的，这可能在某些较老的浏览器中存在问题。它也不适用于相对字体大小（例如ems或%），因为字体大小将级联到后代元素。您只需将float: left添加到两个按钮并将overflow: hidden添加到其容器或其他clearfix方法。

Answer 3

您可以将它们指定为50％宽度，作为块元素（而不是内联块，因为这在旧版浏览器中更受支持），并将它们向左浮动。只需确保放置一个，所以你的格式不会拙劣。

HTML：无法删除两个按钮之间的小5px间隙

3 个答案: