如何創建HTML/CSS

元件之間的空間到目前爲止，我有這樣的：如何創建HTML/CSS

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/>

當在瀏覽器的形式緊挨着對方顯示出來。我如何獲得一些空間，並很好地對齊？

來源

2012-01-12 lrnsomethingnew

你想讓他們排隊嗎？每行一個？我看到你添加了一些'
'元素。這些是你想要的唯一休息嗎？ – ThinkingStiff 2012-01-12 04:50:20

使用UL和css：

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

<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>

來源

2012-01-12 04:50:17 itea

謝謝！我發現有很多方法可以做到，但決定採用你的方法。 – lrnsomethingnew 2012-01-12 07:17:37

-1

許多人可能會建議別的東西，但我建議你在你的情況下使用<table>。

來源

2012-01-12 04:50:00 shinkou

內容不是表格數據。當CSS存在時，我們不會使用'

'元素進行樣式設計，因爲這樣做會很愚蠢;） – Ktash2012-01-12 05:35:32

@Ktash當我們想要將我們的內容對齊到一個類似網格的佈局時，表格在大多數情況下都更適合。因爲我們可以應用一些CSS + JavaScript hacks來模仿類似的結果，但是它會導致不必要的複雜代碼，這對維護非常不利。許多網頁設計師主張嚴格使用CSS進行樣式設計，但在編程統治時，更少，更清晰，因此更容易維護代碼是我們所需要的。無論如何，OP似乎沒有必要對齊網格中的內容，這是我認爲他/她想要閱讀問題的原因。 – shinkou 2012-01-12 19:10:37

'佈局難以維護。我是一名網絡程序員，而不是設計師，而CSS更容易維護。樣式和表示的分離使得維護，更新和升級變得更加容易，現代瀏覽器支持足夠的CSS來處理任何'

'可以做的事情。那些以「

」爲基礎設計的人在1997年寫了一篇關於他如何毀掉互聯網的有趣文章。這是一個很好的閱讀，如果你有興趣http://www.xml.com/pub/a/w3j/s1.people.html – Ktash2012-01-12 20:05:46

因爲都是文本字段，它可以更容易！我會建議使用CSS顯示：塊功能

這裏的CSS：

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

，這裏是你的榜樣是I put into JSFiddle。您可能需要做一些調整才能滿足您的喜好，但這是我能想到的最簡單的方法！

來源

2012-01-12 04:55:17

相關問題

如何創建HTML/CSS

回答

相關問題