关于布局提交按钮的问题

我有此示例代码：

<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;

我尝试添加底：-10px;到div.bottom，但提交按钮将在表格的底部被剪切。添加一个z-index：200不会帮助。

来源

2011-04-27 Tim

一个选择是使用CSS来专门改变提交按钮的位置。我已经完成了下面的内容，所以它可能看起来完全错误，但是玩弄它。

HTML：

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

CSS：

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

来源

2011-04-27 14:54:22

thx，这很好。但还没有完全解决。底部将向下移动，但会在表格底部切割。添加z-index不会帮助 – Tim 2011-04-27 15:03:46

尝试将CSS溢出属性设置为表单本身的“可见”。 – 2011-04-27 15:09:32

太棒了！ – Tim 2011-04-27 15:31:05

你不能有form元素外的提交按钮，它需要在里面。

如果你想两个盒子，一个橘子和一个红色的，包含表单输入字段和包含提交按钮红色的橙色，你应该做这样的事情：

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

而且在你的css

.holder { border:1px solid orange; } 
.button { border:1px solid red; margin-top:10px; }

来源

2011-04-27 15:00:32 vindia

我不想在窗体外添加它，我想将它放在外面。 – Tim 2011-04-27 15:28:36

关于布局提交按钮的问题

回答

相关问题