输入在 <details> 标签内变得混乱

Question

我将一个输入组放在 <details> 标签中。在外面，它工作得很好，但在里面，输入的高度增加了。请注意，我正在为我的项目使用 Halfmoon。（免责声明：我自己构建了项目）

无论如何，这是代码：

<link href="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.0.3/css/halfmoon.css" rel="stylesheet"/>

<div class="content">
  
  <!-- Input group outside -->
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Shop</span>
    </div>
    <input type="text" class="form-control" placeholder="Enter products">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">Search</button>
    </div>
  </div>
  
  <br />
  
  <details open>
    <summary>Click to open/close</summary>
    This is the details for the summary.
    <!-- Input group inside -->
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Shop</span>
      </div>
      <input type="text" class="form-control" placeholder="Enter products">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button">Search</button>
      </div>
    </div>
  </details>
  
</div>

如您所见，<details> 内部的输入组高度混乱，这也影响了它前面的文本。到底我在这里做错了什么？作为参考，输入组代码取自文档，特别是这个例子：https://www.gethalfmoon.com/docs/input-group/#stacking-text-and-buttons.

感谢您的帮助。

Answer 1

只需将 box-sizing: border-box 添加到 .input-group

.input-group {
  box-sizing:border-box;
}

<link href="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.0.3/css/halfmoon.css" rel="stylesheet"/>

<div class="content">
  
  <!-- Input group outside -->
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Shop</span>
    </div>
    <input type="text" class="form-control" placeholder="Enter products">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">Search</button>
    </div>
  </div>
  
  <br />
  
  <details open>
    <summary>Click to open/close</summary>
    This is the details for the summary.
    <!-- Input group inside -->
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Shop</span>
      </div>
      <input type="text" class="form-control" placeholder="Enter products">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button">Search</button>
      </div>
    </div>
  </details>
  
</div>

输入在 <details> 标签内变得混乱

Input gets messed up inside <details> tag

html

css

halfmoon