Question

我正在做一些工作并且有一个表格，我想看起来像一个列表（想想<ul>格式，只是没有子弹）。

但是，现在所有输入都是内联的：

Item 1  Item 2  Item 3  etc

我希望它看起来像：

Item 1 
Item 2 
Item 3 
etc

代码：

<form action = "display.php" method = "post">
  <h1>My form</h1>
        <input type="checkbox" name="movie[]" value="action" />
        <label for="male">action</label>
      <br><br>
        <input type="checkbox" name="movie[]" value="adv" />
        <label for="male">adv</label>
<br><br>
    <h1>My form</h1>
        <input type="checkbox" name="movie[]" value="com" />
        <label for="male">com</label>
<br><br>
        <input type="checkbox" name="movie[]" value="rom" />
        <label for="male">rom</label>
<br><hr>
       <input type="submit" id="submitbutton" name="search" value="Submit">
</form>

我还想知道我是否可以移动提交按钮并将其放在页面的底部，因此表单位于页面的上半部分，然后我想在中间移动按钮，那将是怎样的有可能吗？现在表格处于一个完美的位置，但我想移动按钮，使其位于中间页面的下半部分。

再次感谢您的帮助。

Answer 1

TL：DR; http://codepen.io/anon/pen/YqQvoE（这是您需要的代码）

长（呃）解释：

我建议您在行之间添加<br />标记。有几种方法可以实现，但这是最简单的方法。

对于位于底部中心的按钮，只需将以下CSS应用于它（并确保相应地设置按钮的ID）：

#submitbutton {
  display:block;
  margin:auto;
}

（另外，您的<form>代码需要关闭）

顺便说一下，作为最佳做法问题，请确保每个for=""的{{1}}不同。它应与标签相关<label>。

的name=""相对应

Answer 2

你需要关闭你的表格以及你的div。此外，将按钮环绕在自己的特殊范围或具有绝对定位的div中。看看这个例子：

<form action = "display.php" method = "post">
    <input type="checkbox" name="movie[]" value="action" />
    <label for="male">action</label>

    <input type="checkbox" name="movie[]" value="adv" />
    <label for="male">adv</label>

    <input type="checkbox" name="movie[]" value="com" />
    <label for="male">com</label>

    <input type="checkbox" name="movie[]" value="rom" />
    <label for="male">rom</label>

    <span style="position: absolute; bottom: 0px; right: 0px; left: 0px; text-align: center;">
       <input type="submit" name="search" value="Submit">
    </span>
</form>

如何在自己的行上放置表单输入

2 个答案: