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>