CSS：在其中一个在表单中的 Div 中水平排列按钮答案

【问题标题】：CSS: Lining Up Buttons Horizontally In A Div Where One Of Them Is In A FormCSS：在其中一个在表单中的 Div 中水平排列按钮
【发布时间】：2012-06-16 21:57:30
【问题描述】：

我有一个 JSP 页面，其中在页面底部的自己的 div 中有一行按钮。最左边的按钮属于一个表单，其结束标记与 button_bar div 的开始重叠。最右边的按钮有自己独立的形式。

当我将 JSP 保存为 HTML 页面（完整，带有 css 文件等）时，按钮水平排列，就像我喜欢的那样。但是，当内容在 JSP 中时，按钮不会水平排列。

我可以用 CSS 做些什么来解决这个问题。

按钮 div：

<div class="button_bar">


        <div class="button_bar_left_button">     
            <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
        </div>

</form><!-- end form 'f', main form -->    

    <div class="button_bar_left_button">     
        <input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button">
    </div>


        <div class="button_bar_right_button">
            <form action="initialRequest" method="post">
                <input name="NextRequest" value="Add Member" type="hidden">
                <input "buttonaddmember"="" value="Add Member" type="submit">
            </form>       
        </div>




</div><!-- end div button_bar -->

我的样式表中的 CSS：

/* horizontal button bar */
.button_bar
{
    margin-left:auto;
    margin-right:auto;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-bottom: 2%;
    width:100%;
    height:auto;
    vertical-align:top;
}

/* put a button on the far right of the above button bar */
.button_bar_right_button
{
    float:right;
    margin-left:1%;
    vertical-align:top;
}
/* put a button on the far left of the above button bar */
.button_bar_left_button
{
    float:left;
    margin-left:1%;
    vertical-align:top;
}

回答

MODs steveax 下面的评论帮助我解决了这个问题。他提到一些浏览器会插入标签来平衡我正在做的一个错误。这导致我做出改变以解决问题。我愿意接受他的第二条评论（第一个建议答案下的第一条评论）作为答案。

我将表单结束标记移到按钮的 div 下方。我还将“添加成员”表单移到了所有这些之外，并将“添加成员”按钮更改为一个普通的旧按钮，并在 onclick 中调用 *.submit 以获取该特殊表单。那解决了它。我没有看到“接受评论作为答案”链接/按钮，但如果有，我会把它给你。非常感谢。 ——史蒂夫刚刚编辑

【问题讨论】：

这不是有效的 HTML - 您是否通过 validator 运行页面？

标签： css button html alignment

【解决方案1】：

我删除了您输入的一部分"buttonaddmember"=""，因为它无效。现在似乎水平对齐。不确定您是否有意这样做。

<input "buttonaddmember"="" value="Add Member" type="submit">

http://jsfiddle.net/6MXuZ/

或者在 button_bar div 上添加 position:relative，然后绝对定位按钮。

【讨论】：

除了那个错误之外，他还关闭了 div 中间的表单标签 (<div>...</form>...</div>)。浏览器很可能会在关闭表单标记 (<div>...</div></form>...</div>) 之前添加一个关闭 div 标记以纠正 DOM 树错误，这将导致不可预知的渲染。
克里斯托弗，想到了这一点。我一定是退格了我的名字属性。修复它并没有帮助。我将尝试其他方法并报告。
steveax，感谢您提及。我确实在最终结果中发现了一些标签，这些标签不在我将它们放在源代码中的位置。我想知道是否有像你提到的那样发生的事情。我将尝试看看是否可以重新排列 div 和表单。
steveax，我将表单结束标记移到按钮的 div 下方。我还将“添加成员”表单移到了所有这些之外，并将“添加成员”按钮更改为一个普通的旧按钮，并在 onclick 中调用 *.submit 以获取该特殊表单。那解决了它。我没有看到“接受评论作为答案”链接/按钮，但如果有，我会给你。非常感谢。
@Steve 我在下面的答案中的评论中添加了解决方案。

【解决方案2】：

有一些 HTML 错误会导致不可预知的渲染，即：

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</form><!-- end form 'f', main form -->  
[...]
</div><!-- end div button_bar -->

浏览器将纠正此错误，通过在关闭 <form> 标记之前关闭 button_bar div 来获得有意义的 DOM：

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</div><!-- Browser will likely insert a closing tag for .button_bar here to correct the error -->
</form><!-- end form 'f', main form -->  
[...]
<!-- This closing div tag will now be "extra" -->
</div><!-- end div button_bar -->

【讨论】：