CSS:在其中一个处于表单中的 Div 中水平排列按钮

Question

我有一个 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。那解决了它。我没有看到“接受评论作为答案”链接/按钮，但如果有我会把它给你。非常感谢。 – Steve 刚刚编辑

---

Answer 1

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

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

http://jsfiddle.net/6MXuZ/

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