0

我有一个 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 以获取该特殊表单。那解决了它。我没有看到“接受评论作为答案”链接/按钮，但如果有，我会给你。非常感谢。– 史蒂夫刚刚编辑

4

2 回答 2

1

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

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

http://jsfiddle.net/6MXuZ/

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

于 2012-06-13T21:19:51.427 回答
0

有一些 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 -->

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

<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 -->
于 2012-06-25T02:41:31.250 回答