我该怎么办呢？

Question

我已经提交并重置了一个表单的按钮，我不知道我的生活中弄清楚它们是如何进入文本框的。然后地址元素也显示在右侧。

<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>



<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>


<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />   

</form>

CSS：

input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}

当然我错过了什么？

Answer 1

CSS

#request { display: block; clear: both; }

Working Fiddle

Answer 2

textarea之后的换行怎么样？

即：

<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />

<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />   

或通过css，你可以让2个按钮中的第一个清除任何以前的花车;

input[type="submit"] {
  clear: both;
}

Answer 3

而不是display: inline-block;尝试display: block;用于您的文本区域（执行此操作会说“除了它浮动之外，不会将任何其他内容放在与此元素相同的行”上），或者用于提交订单并取消的按钮。

我还建议将两个按钮放在包装div中，这样就可以将这两个按钮的位置作为一个单元而不是单独操作。

另外，最后一点：在具有相同ID的页面上不要有多个元素。对于要将相同属性应用于的元素，请将id设为类。

Answer 4

您可以使用div来包装它们。 我没有看到“地址元素”，所以我无法帮助你。

<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />   
</div>

Answer 5

您可以尝试this working fiddle！

<form>
  <label id="warranty">
  <input type="checkbox" name="warranty" />
  Yes, I want the 24-month extended warranty
  </label>
  <label for="request" id="request">Any special requests on your order?</label>
  <div class="clear:both"></div>
  <textarea name="request" id="request"></textarea>
  <div class="clear:both"></div>

  <input type="submit" value="Submit Order" />
  <input type="reset" value="Cancel" />   
</form>