html - 输入在 标签内被弄乱了

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>