CSS表单样式

Question

我正在努力做到这一点：

<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.框应该在左边）

有什么想法吗？

Answer 1

在地址输入后插入<br />。您可以使用属性text-align: right;对齐选择和输入。可以使用margin: 5px;设置各个元素之间的空格，以在每个元素的顶部，左侧，底部和右侧应用5px的空格。

就这样把它放在一起：

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

要为您的“位置/地址”标签指定所需的尺寸，您可以创建一个css级别并将其应用于标签。

此外，您应该考虑仔细研究基本的CSS。你肯定会需要它多次，这真的不难理解。

Answer 2

即使在现代浏览器中形式总是呈现略有不同，它也取决于您使用的操作系统，我认为内联块在下拉菜单之前是个好主意。

你听说过jQuery UI Datepicker吗？它功能强大，用户和程序员友好。

Answer 3

我总是，但是我的标签在p标签中输入，然后将标签设置为显示：阻止并以设定的宽度向左浮动，例如。

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

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

对于日期我会做同样的事情，但是为p添加一个id-id =“dob”然后为这些输入设置一个特殊情况，如：

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

这意味着您可以轻松控制此标记中选择的宽度失败。

Answer 4

使用表格。 （是的，我知道这不是一个“纯粹的”解决方案，但它可以在CSS解决方案的一小部分时间内完成工作，并且它有更好的机会在IE6中工作而没有一天的黑客攻击）。 / p>