html - 如何使用HTML/CSS添加边框线

This question already has an answer here:

List of HTML5 elements that can be nested inside P element?
                                
                                    （1个答案）
                                
                        
                                3个月前关闭。
            
                    
我正在尝试向正在工作的小部件添加边框，但它并未捕获整个假发字段，只有一半在画一条线

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;}

最佳答案

段落不打算用作其他块元素的包装。渲染引擎将在打开随后的<p>之前自动关闭<div>标记，因此将渲染没有高度的空段落，从而导致边框没有任何其他内容。将段落更改为<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>