格式化输入字段

只是有一个简单的问题，我正在一个网站上工作，正如您所看到的，我已经创建了几个输入字段。理想情况下，我希望我所有的输入字段都偏向最右侧，而这正是他们所在的位置。不幸的是，它们过度聚集，没有太多填充。我试图给我的输入字段添加一个类，并通过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; 
}

来源

2015-11-08 Justin R

将是棘手的这个HTML这样的一个很好的方式，你可以修改它呢？如果不是的话，你可以尝试'line-height'来把事情分开。 –

我可以修改它，但不是我想要的适当方式。每当我开始搞乱CSS时，我最终会增加字段的宽度/空间。我尝试将字段添加到DIV，然后添加一个类，但是我又一次遇到了同样的问题。我不确定是不是因为我的绝对;或其他东西 –

您需要申请margin。

input{ 
    margin: 5px; 
}

CODEPEN DEMO

来源

2015-11-08 02:14:49

line-height似乎是准确的方式，如果你不想惹任何更改。

您可以直接调用CSS中form并添加line-height存在或为窗体类，做这将是更好的同

form { 
    line-height: 30px; 
}

这是我用它测试间隔的东西出来：

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

来源

2015-11-08 02:19:42 TrojanMorse

是的，它在小提琴中，因为我的代码中的一些奇怪的原因，它使输入扩展，猜我需要调试，看看是什么造成这个问题 –

这是因为你可能有其他一些CSS重写在你的CSS轨道的其他地方它下降。 @JustinR –

@SusheelSingh是对的，你将需要检查你的样式是否超越它。可能会在输入字段中删除名为'test'的类，然后向表单中添加一个类，然后执行'line-height'属性。保持我们的发布 – TrojanMorse

我会用

http://materializecss.com/forms.html

或者引导，但材料必须做形式

来源

2015-11-08 02:25:31

格式化输入字段

回答

相关问题