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

这是我的代码：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;
    }

雇员状况：
活跃的
不活跃的
发件人：
致：
搜索：
css:
.fieldDate{
浮动：对；
右边距：200px；
}

我希望在三个字段之间留有空格：status、from/to、search 我该怎么做？

---

它们都出现在同一行中（这是我想要的），字段之间没有空格。

将它们全部向左浮动，并根据需要将前两页边距向右（或最后两页边距向左）：

来自：
致：
搜索：
输入#从日期、输入#到日期、输入#搜索{
浮动：左；
}
输入#从日期，输入#到日期{
右边距：10px；
}

在本例中，右边距将按“10px”将元素“推”到右边，从而创建所需的空白空间。

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

#从，#toDate，#搜索{宽度：30%；浮动：左；}
发件人：
致：
搜索：

---

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

使用CSS

表格

和

标签

，以实现更智能的目的…将字段包装在

标签

中并为其分配CSS…无需使用单独的类或id！！：）

请注意，

display:table

在IE8之后受支持

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