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;

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

Answer 1

一种选择是使用CSS专门移动提交按钮的位置。我已经编写了下面所以它可能看起来完全错了，但是可以玩它。

HTML：

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

CSS：

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

Answer 2

你不能在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; }

关于布局提交按钮的问题

2 个答案: