格式化輸入字段

只是有一個簡單的問題，我正在一個網站上工作，正如您所看到的，我已經創建了幾個輸入字段。理想情況下，我希望我所有的輸入字段都偏向最右側，而這正是他們所在的位置。不幸的是，它們過度聚集，沒有太多填充。我試圖給我的輸入字段添加一個類，並通過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

格式化輸入字段

回答

相關問題