Question

这是我的代码：html

 <div class="fieldDate">
    <label for="statusEmp">Status of Employee:</label>
    <select  name="statusEmp" id="statusEmp">
        <option value="0">Active</option>
        <option value="1">Inactive</option>
    </select>


        <label  for="fromDate">From:</label>
        <input type="date" name="fromdate" id="fromDate">

        <label for="toDate">To:</label>
        <input  type="date" name="todate" id="toDate">

        <label for="search">Search:</label>
        <input  type="search" name="search" id="search">
        <input type="submit">
    </div>

css :

    .fieldDate{
        float: right;
        margin-right: 200px;
    }

我想在三个字段之间留出空间：status，from / to，search 我该怎么做？它们都出现在相同的行中（这就是我想要的），而且在字段之间没有空格。

Answer 1

将它们全部漂浮在左边，并在希望时给出前两个边距（或最后两个边距）：

<label  for="fromDate">From:</label>
<input type="date" name="fromdate" id="fromDate">

<label for="toDate">To:</label>
<input  type="date" name="todate" id="toDate">

<label for="search">Search:</label>
<input type="search" name="search" id="search">

input#fromDate, input#toDate, input#search {
    float: left;
}

input#fromDate, input#toDate {
    margin-right: 10px;
}

在此示例中，margin-right将“推”右侧的元素“10px”，从而根据需要创建空白区域。

Answer 2

<style>
#from,#toDate,#search{width: 30%;float:left;}
</style>


<div class="fieldDate">
    <div id="from">

        <label  for="fromDate">From:</label>
        <input type="date" name="fromdate" id="fromDate">
    </div>
    <div id="toDate">

        <label for="toDate">To:</label>
        <input  type="date" name="todate" id="toDate">
    </div>
    <div id="search">

        <label for="search">Search:</label>
        <input  type="search" name="search" id="search">
    </div>
        <input type="submit">
</div>

您必须定义三个不同的div，并根据需要提供宽度。

Answer 3

使用CSS tables和label以实现更明智的目的....将您的字段包装在label内并为其分配css ...无需使用单独的类或ID ！：）

Working demo

请注意，IE8以后版本支持display:table

<强> CSS

#table {
    display:table;
    width:100%;
}
label {
    display:table-cell;
    white-space:nowrap;
    margin-right:4px;
}

<强> HTML

<div id="table">
    <label for="statusEmp">Status of Employee:
        <br />
        <select name="statusEmp" id="statusEmp">
            <option value="0">Active</option>
            <option value="1">Inactive</option>
        </select>
    </label>
    <label for="fromDate">From:
        <br />
        <input type="date" name="fromdate" id="fromDate" />
    </label>
    <label for="toDate">To:
        <br />
        <input type="date" name="todate" id="toDate" />
    </label>
    <label for="search">Search:
        <br />
        <input type="search" name="search" id="search" />
    </label>

</div>
<input type="submit" />

在单个div标签内的字段之间提供空间

3 个答案: