Html 浮动元素下的按钮对齐

请参见未对齐按钮的附图

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>

我尝试在动作按钮之后添加，并在动作按钮css中包含float:left。没有帮助。 如果我使按钮标签变短，它将正常工作并对齐。 问题：为什么两个蓝色按钮不相邻？

必须使用“清除：两个”来清除浮动元素。只需添加以下CSS即可解决此问题

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

---

补充明确：两者皆有；对于.action btns按钮，因为.athleter info是浮动的

.action-btns {   
  clear: both;
}

非常感谢。我还删除了浮动：左；从运动员信息，因为它已经在。信息垫

.action-btns {   
  clear: both;
}