按钮对准

Question

查看按钮的附加的图像未对准

的CSS和HTML是：

<div class="row"> 
<div class="col-lg-10"> 
    <div class="athlete-image"> 
     <img src="{{ url('assets/img/profile.png') }}" class="img-circle img-responsive img-center"> 
    </div>      
    <div class="info-pad"> 
     <div class="athlete-name"> 
      <h4>{{ $an_athlete->name }} {{ $an_athlete->surname }}</h4>  
     </div> 
     <div class="athlete-info"> 
      <p><i class="fa fa-phone athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->cellphone }}</p> 
      <p><i class="fa fa-male athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->gender }}</p> 
      <p><i class="fa fa-female athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->gender }}</p> 
     </div> 
     <div class="action-btns"> 
      <a href="{{ route('admin.edit_athlete', ['athlete' => $an_athlete->id]) }}" class="btn btn-labeled btn-info"> 
       <span class="btn-label"><i class="fa fa-pencil"></i></span>Edit Profile</a> 
      <a href="{{ route('admin.test_athlete', ['athlete' => $an_athlete->id]) }}" class="btn btn-labeled btn-info" role="button"> 
       <span class="btn-label"><i class="fa fa-heartbeat"></i></span>Create New Test Day</a> 
     </div> 
    </div>      
</div> 

.athlete-image { 
max-height:100px; 
max-width:100px; 
overflow:hidden; 
padding-top: 10px; 
padding-left: 10px; 
margin-bottom: 20px; 
float: left; 
} 

.info-pad { 
margin-left: 15px; 
float: left; 
} 

.athlete-name { 
margin-top: 5px;  
} 

.athlete-info { 
display: inline-block; 
float: left; 
} 

.athlete-info > p { 
font-size: 14px; 
color: #666666;  
float: left; 
padding-right: 12px; 
display: inline-block;  
} 

.action-btns{ 
padding: 15px 0px;  
} 

我已经尝试添加<div style="clear: both;"></div>后动作按钮并在动作按钮css中包含float: left。没有帮助。 如果我缩短按钮标签，它会正常工作并对齐。 问：为什么两个蓝色按钮不相邻？

Answer 1

您必须使用clear:both来清除浮动元素。
只需添加以下CSS来解决这个问题

.action-btns{ 
    padding: 15px 0px;  
    clear: both; 
} 

Answer 2

添加明确：两者;为.action-btns按钮，因为.athlete-info是浮动的。

.action-btns { 
    clear: both; 
}