CSS樣式表

我試圖使這個：CSS樣式表

<form id="simple-search" name="simple-search" action="/search/" method="POST"> 
    <label for="simple-search-address">Location/Address</label> 
    <input type="text" id="simple-search-address" name="address" value="" /> 
    <label for="simple-search-dob-day'">D.O.B.</label> 
    <select name="dob-day" id="simple-search-dob-day"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 
    <select name="dob-month" id="simple-search-dob-month"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> 
    <select name="dob-year" id="simple-search-dob-year"><option value="0">2009</option><option value="1">2008</option><option value="2">2007</option><option value="3">2006</option><option value="4">2005</option><option value="5">2004</option><option value="6">2003</option><option value="7">2002</option><option value="8">2001</option><option value="9">2000</option><option value="10">1999</option><option value="11">1998</option><option value="12">1997</option><option value="13">1996</option><option value="14">1995</option><option value="15">1994</option><option value="16">1993</option><option value="17">1992</option><option value="18">1991</option><option value="19">1990</option><option value="20">1989</option><option value="21">1988</option><option value="22">1987</option><option value="23">1986</option><option value="24">1985</option><option value="25">1984</option><option value="26">1983</option><option value="27">1982</option><option value="28">1981</option><option value="29">1980</option><option value="30">1979</option><option value="31">1978</option><option value="32">1977</option><option value="33">1976</option><option value="34">1975</option><option value="35">1974</option><option value="36">1973</option><option value="37">1972</option><option value="38">1971</option><option value="39">1970</option><option value="40">1969</option><option value="41">1968</option><option value="42">1967</option><option value="43">1966</option><option value="44">1965</option><option value="45">1964</option><option value="46">1963</option><option value="47">1962</option><option value="48">1961</option><option value="49">1960</option><option value="50">1959</option><option value="51">1958</option><option value="52">1957</option><option value="53">1956</option><option value="54">1955</option><option value="55">1954</option><option value="56">1953</option><option value="57">1952</option><option value="58">1951</option><option value="59">1950</option><option value="60">1949</option><option value="61">1948</option><option value="62">1947</option><option value="63">1946</option><option value="64">1945</option><option value="65">1944</option><option value="66">1943</option><option value="67">1942</option><option value="68">1941</option><option value="69">1940</option><option value="70">1939</option><option value="71">1938</option><option value="72">1937</option><option value="73">1936</option><option value="74">1935</option><option value="75">1934</option><option value="76">1933</option><option value="77">1932</option><option value="78">1931</option><option value="79">1930</option><option value="80">1929</option><option value="81">1928</option><option value="82">1927</option><option value="83">1926</option><option value="84">1925</option><option value="85">1924</option><option value="86">1923</option><option value="87">1922</option><option value="88">1921</option><option value="89">1920</option><option value="90">1919</option><option value="91">1918</option><option value="92">1917</option><option value="93">1916</option><option value="94">1915</option><option value="95">1914</option><option value="96">1913</option><option value="97">1912</option><option value="98">1911</option><option value="99">1910</option><option value="100">1909</option><option value="101">1908</option><option value="102">1907</option><option value="103">1906</option><option value="104">1905</option><option value="105">1904</option><option value="106">1903</option><option value="107">1902</option><option value="108">1901</option><option value="109">1900</option></select> <input type="hidden" name="search-type" value="simple" /> 
    <input type="submit" id="simple-search-submit" name="submit" value="Search" /> 
</form>

樣子：http://img686.imageshack.us/img686/8994/95340998.gif（注意最左邊的D.O.B.箱應在左邊線）

任何想法？

來源

2009-12-16 steven

我不知道如何開始。 – steven 2009-12-16 08:29:16

也許你想看看類似wordpress.com的頁面：http：//en.wordpress.com/wp-login.php檢查他們的CSS文件並嘗試理解。一般來說，這是瞭解CSS使用情況的好方法。 – 2009-12-16 08:42:37

在地址輸入後插入<br />。您可以將選擇和輸入與屬性text-align: right;對齊。單個元素之間的空間可以使用margin: 5px;來設置，以在每個元素的頂部，左側，底部和右側應用5px的空白。

只要把這樣在一起：

form { 
    text-align: right; 
    margin: 5px; 
}

爲了讓你的「定位/住址」標籤所需的大小，你可以創建一個CSS類，並將其應用到標籤。

此外，你應該考慮仔細看看基本的CSS。你肯定會需要更多的時間，這真的不難理解。

來源

2009-12-16 08:31:39 Ham

即使在現代瀏覽器中，表格總是呈現略微不同，它也取決於您使用的操作系統，我認爲內嵌塊在下拉菜單之前是個不錯的主意。

你聽說過jQuery UI Datepicker嗎？它非常強大，用戶和程序員更友好。

來源

2009-12-16 08:39:02 antpaw

我總是將標籤輸入到p標籤中，然後將標籤設置爲顯示：塊，並將其向左浮動一段設定的寬度，例如，

<p><label></label><input type="text" name="thing" id="thing" value="" /></p> 

label{ 
float: left; 
display: block; 
width: 100px; 
} 
input,select{ 
width: 200px; 
}

對於日期，我會做同樣的，但添加一個ID像在p - ID =「DOB」，然後設置一個特例像那些輸入：

#dob select{ 
width: 50px; 
float: left; 
}

這意味着您可以輕鬆控制此代碼故障中的選擇寬度。

來源

2009-12-16 08:46:23 matpol

使用表格。（是的，我知道這不是一個「純粹的」解決方案，但它只需要CSS解決方案的一小部分時間就能完成工作，而且在沒有一天的黑客攻擊的情況下，在IE6中工作的機會更大）。

來源

2009-12-16 09:22:58 erikkallen

回答

相關問題