Question

我有以下html代码段：

＆＃13;

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

＆＃13;

我试图将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>

将DIV放置在表格中，不能设置最小宽度和高度

2 个答案: