域之间提供单一div标签

，这是我的代码中的空间：HTML域之间提供单一div标签

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

我想有三个字段之间的空间：现状，从/到，搜索我该怎么做呢？他们都出现在同一行（这是我想要的）没有空间之间的领域。

来源

2014-01-15 Coder17

你有没有试过填充？ –

你希望他们所有**在一行**，然后在他们之间有一个**空间** ...正确?? ??因为你目前的标记把他们放在不同的行！ – NoobEditor

究竟@ NoobEditor – Coder17

<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并根据需要提供宽度。

来源

2014-01-15 06:46:26 Dipak

浮法他们全部离开，并给前两个缘右（或最后两个保证金左）在心愿：

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

在这个例子中，保证金权将“推”上的元素正确的“10px”，从而创造你想要的空白空间。

来源

2014-01-15 06:40:14 user1853181

嘿伟大的答案。工作。非常感谢 – Coder17

不客气。很高兴我能帮上忙。 – user1853181

使用CSS tables和label为更聪明的目的....将您的领域包裹在label并分配给它的CSS ...不需要使用单独的类或ID！ :)

Working demo

请注意，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" />

来源

2014-01-15 06:50:03 NoobEditor

域之间提供单一div标签

回答

相关问题