Question

到目前为止，我有这个：

Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /> <br/>
<br/>
Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -) <br/>
<br/>
Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/> <br/>

当它显示在浏览器中时，表单彼此相邻。如何在两者之间放置一些空间并很好地对齐？

Answer 1

使用ul和css：

＆＃13;

  #a-form {list-style: none; margin:0; padding: 0;}
    #a-form li {}
    #a-form input {display:inline-block; margin-right: 1em;}

＆＃13;

<ul id="a-form">
      <li>Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /></li>
      <li>Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -)</li>
      <li>Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/></li>
    </ul>

＆＃13;

Answer 2

由于它们都是文本字段，因此更容易！我建议使用CSS显示：阻止功能

这是CSS：

input[type="text"]{
display:block;
margin-bottom:20px;
}

这是I put into JSFiddle的例子。您可能需要做一些调整以达到您的喜好，但这是我能想到的最简单的方法！

Answer 3

很多人可能会提出其他建议，但我建议你在案件中使用<table>。

如何在HTML / CSS中的<input />元素之间创建空格

3 个答案: