css - 关于布局提交按钮的问题

Question

我有布局问题。

我有这个示例代码:

<div class="frame"><div class="holder"><form class="newform">...<div class="button"><input type="submit"></div></form></div></div>

还有这个样式表:

form.newform{border:1px solid orange} 
div.button{border:1px solid red;width:100%;position:relative;overflow:hidden;}

现在提交按钮(红色框)将显示在表单底部(橙色框)。但我喜欢在橙色框之后(例如底线后 10px)显示它。

也许有人可以帮我解决这个问题。

最好的问候

蒂姆

编辑:这是 form.newform 的完整 css 部分

overflow:hidden;
height:1%;
background:url(../images/contentform.gif) repeat-y;
padding:0 0 2px;
border:1px solid orange;

我试图添加 bottom:-10px;到 div.bottom 但提交按钮将被剪切在表单的底部。添加 z-index:200 不会有帮助。

Answer 1

一种选择是使用 CSS 专门移动提交按钮的位置。我编造了以下内容，所以它可能看起来完全错误，但请尝试一下。

HTML:

<input type="submit" id="submitbutton">

CSS:

#submitbutton {
position: relative;
bottom: -50px;
}