形式放置DIV，不能設置最小寬度和高度

Question

我有以下HTML片段：

<form name="foo"> 
 
    <fieldset> 
 
    <legend>Legend Here</legend> 
 
    <label for="the_date">Date: </label><input type="text" name="the_date" id="the_date"> 
 
    <select class="show_when_needed" id="event_state"> 
 
     <option value="-1" selected="selected">N/A</option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
     <option value="6">Six</option> \t \t \t \t \t \t \t \t \t 
 
    </select> 
 
    <div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div> 
 
    <button type="button" name="go_next" id="go_next">Go!</button> 
 
    </fieldset> 
 
    <hr /> 
 
    <button type="button" id="save_object">Save Object</button> 
 
</form>

我想有DIV顯示嵌入式，並設置最低寬度（強制顯示在屏幕上）。

上面的HTML並沒有達到這個目標。我如何糾正它，讓div出現在選擇選項控件旁邊？

[附加信息]

我已經試過這在FF和Chrome的最新版本 - 都無法正確顯示。

Answer 1

你需要給元素的display: inline-block，你不能設置一個內聯元素的寬度或高度，因爲它的行爲就像一個<span>或<strong>會，只服用空間它需要。

Take a look at this updated snippet with display: inline-block

Answer 2

由display: inline;變爲display: block;。

<form name="foo"> 
 
    <fieldset> 
 
     <legend>Legend Here</legend> 
 
     <label for="the_date">Date: </label><input type="text" name="the_date" id="the_date"> 
 
     <select class="show_when_needed" id="event_state"> 
 
      <option value="-1" selected="selected">N/A</option> 
 
      <option value="1">One</option> 
 
      <option value="2">Two</option> 
 
      <option value="3">Three</option> 
 
      <option value="4">Four</option> 
 
      <option value="5">Five</option> 
 
      <option value="6">Six</option>         
 
     </select> 
 
     <div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div> 
 
     <button type="button" name="go_next" id="go_next">Go!</button> 
 
    </fieldset> 
 
    <hr /> 
 
    <button type="button" id="save_object">Save Object</button>  
 
</form>