域之間提供單一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標籤

回答

相關問題