如何擴展一個類的邊界而不是其他類

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解決方案讓人想起，如果你可以設置元素的高度。