格式化输入字段

Question

只是有一个简单的问题，我正在网站上工作，你可以看到我创建了一些输入字段。理想情况下，我希望我的所有输入字段都偏向最右边，它们就是这样。不幸的是，它们过度聚集而没有太多填充物。我已尝试在输入字段中添加一个类，并通过CSS添加适当的填充，但我只管理设法让它们全部到最右边。

所以我的问题是，我需要添加什么，以便我的输入字段位于最右边并适当间隔？

<form action="demo_form.asp">
    First Name: <input type="text" name="fname" class="test" required>
    <br>Last Name: <input type="text" name="lname" class="test" required>
    <br>Contact Me By: 
    <select name="contactuser" form="carform" class="test"">
    <option value="email">Email</option>
    <option value="phone">Phone</option>
    </select>
    <br>Email: <input type="text" name="email" class="test" required>
    <br>Phone: <input type="text" name="phone" class="test" required>
    <br>Zip Code: <input type="text" name="zipcode" class="test" required>
    <br>
<input type="submit">

CSS

.test {
    position: absolute;
    right: 0;
}

Answer 1

您需要应用margin。

input{
   margin: 5px;
}

CODEPEN DEMO

Answer 2

如果你不想改变任何事情，那么

line-height似乎是确切的方法。

你可以在CSS中调用form并在那里添加line-height或者给表单一个类并做同样的更好

form {
    line-height: 30px;
}

这就是我测试过的东西，并将它分开：

小提琴 - https://jsfiddle.net/20LcL21k/1/

Answer 3

我会用

http://materializecss.com/forms.html

或者引导，但是材料有很好的表格形式