如何扩展一个类的边界而不是其他类

Question

我想围绕朋友类的边框扩展从人名到添加朋友类的整个距离。

HTML

<div class = 'friends'> Persons Name</div> 
    <div class = 'buttons'> add as friend </div> 

CSS

.friends { 
      border: 1px solid; 
      display: inline; 
      } 
.buttons { 
      background-color:blue; 
      float: right; 
      width: 50px; 
      display: inline; 
      } 

我added a jsfiddle展示的问题。

Answer 1

尝试做这样的：

HTML

<div class = 'friends'> Persons Name 
    <div class = 'buttons'> add as friend </div> 
</div> 

CSS

.friends { 
     border: 1px solid; 
     display: block; 
     width: 100%; 
     } 

.buttons { 
     background-color:blue; 
     float: right; 
     display: inline; 
     } 

我认为这是你正在尝试做的。

Answer 2

This解决方案让人想起，如果你可以设置元素的高度。