Question

我对HTML非常陌生并且在发布这个问题之前犹豫不决，因为它看起来非常简单，但是在Googling之后我没有得到很好的答案。

以下是我的简单表单代码，我想将表单输入元素保持在不同的行中。问题是我真的需要使用硬编码的 250px 宽度到div，因此该元素将在不同的行中编码。

如何改进我的代码，以便它可以在不同的浏览器和屏幕上移植？

其次，所有线之间的距离非常小，它们实际上是相互折叠的。如何为元素提供更多的垂直空间？

＆＃13;

    <form id="frm">
        <div style="width: 250px;">
    
            <label>Name </label>
            <input type="text" required="required" />
    
            <label>Email</label>
            <input type="text" placeholder="pranit@gmail.com" />
            
            <input type="submit" value="submit" />
        </div>
    </form>

＆＃13;

Answer 1

如果您希望每个标签/输入对出现在它自己的一行上，您应该使用实际导致换行的元素在标记中实现，例如将每个对包装在div或p元素，或者在它们之间使用<br>，或者使每个元素成为表格的一行。在块上设置一个宽度并期望浏览器自动换行是非常不可靠的。考虑例如如果用户将字体大小设置为60px（可能是由于视力问题），您的示例中会发生什么。

要设置垂直间距，请使用CSS。有很多方法可以做到这一点，技术部分取决于所选择的标记。这是一个例子：

＆＃13;

<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
    <table>
      <tr>
        <td>
        <label for="name">Name</label>
        <td>
        <input id="name" name="name" type="text" required="required">
      <tr>
        <td>
        <label for="email">Email</label>
        <td>
        <input id="email" name="email" type="email"
               placeholder="someone@example.com">
      <tr>
        <td colspan="2">
        <input type="submit" value="submit">
    </table>
</form>

＆＃13;

Answer 2

默认情况下，

label代码和input代码为inline。您可以将它们都设置为display: block以使它们堆叠。您还可以添加一些margin来区分它们：

label, input{
    display: block;
    margin: 10px 0;
}

EXAMPLE 1

或

如果您希望label和input内嵌，但每个内联堆叠，您只需使用div之类的块元素包装它们：

<form id="frm"> <div> <div> <label>Name </label> <input type="text" required="required" /> </div> <div> <label>Email</label> <input type="text" placeholder="pranit@gmail.com" /> </div> <input type="submit" value="submit" /> </div> </form>

EXAMPLE 2

Answer 3

1）您可以为diplay到label定义block样式，这会将标签带到新行上，

http://jsfiddle.net/naeemshaikh27/rvg4jdbo/

label{

    display:block;
}


<form id="frm">
    <div>

        <label>Name </label>
        <input type="text" required="required" />

        <label>Email</label>
        <input type="text" placeholder="pranit@gmail.com" />

        <input type="submit" value="submit" />
    </div>
</form>

2）或者如果你想用输入元素保留标签，那么只需在它们之间添加一个div元素http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/

Answer 4

如果每个元素（标签和输入）必须有自己的行，请将它们设置为display: block;

#frm label, #frm input {display: block}

或

#frm div > * {display: block;}

如果您需要在一行中使用label和input，则可以尝试使用浮点数并清除。

label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */

Answer 5

首先使用块元素垂直放置元素。

标签{

display:block;

}

如果可以，请使用百分比宽度而不是像素。它会保持更好，特别是如果它们在同一行（内联）。

<p style="width:50%"> </p> <p style="width:50%"> </p>

也可以针对不同的分辨率使用媒体查询。

Answer 6

浮动标签并输入并使用边框框大小调整方法指定50％宽度。您还需要每个标签输入对的包装元素，用于包含浮动。

form > div {
  width: 250px;
  margin: 1em 0;
  overflow: hidden;
}
label,
input {
  display: block;
  float: left;
  width: 50%;
  box-sizing: border-box;
}
input[type="submit"] {
  width: 100%;
}

<form id="frm">
  <div>
    <label>Name</label>
    <input type="text" required="required" />
  </div>
  <div>
    <label>Email</label>
    <input type="text" placeholder="pranit@gmail.com" />
  </div>
  <div>
    <input type="submit" value="submit" />
  </div>
</form>

我应该总是使用div中的新行宽度吗？

6 个答案: