Question

我有一个滑出垂直侧边栏的按钮。在侧边栏内，我希望有一个简短的表单供用户输入搜索查询。

#search-sidebar是正确的高度。 .ui.form.segment的高度仅为4px。

我不知道该怎么回事......

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我明白了。您必须在class="item"周围添加.ui.form.segment。我不知道你为什么要这么做。

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
<div class="item">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>
</div>

语义UI ui表单段在侧栏中没有高度

1 个答案: