如何使用 HTML/CSS 添加边框线 [重复]

Question

我正在尝试为正在工作的小部件添加边框，但它没有捕获整个 wigets 字段，只有一半正在绘制一条线

enter image description here

HTML：

    <p class="solid">
   <img src="log.jpg" width="20" height="20"/>

    <div class="input-group">
      <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
      </div>
    </div>

 </p>

CSS：

p.solid {border-style: solid;}

Answer 1

段落不打算作为其他块元素的包装。渲染引擎会在打开后面的<div>之前自动关闭<p>标签，因此渲染一个没有高度的空段落，导致只有一个边框没有其他任何东西。将段落更改为<div>（或任何其他语义上可行的元素），它将起作用。

.solid {
  border-style: solid;
}

<div class="solid">

  <div class="input-group">
    <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
    <div class="input-group-btn">
      <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>