0
查看按钮的附加的图像未对准按钮对准
的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
。没有帮助。 如果我缩短按钮标签,它会正常工作并对齐。 问:为什么两个蓝色按钮不相邻?
非常感谢。我还从运动员信息中删除了'float:left;',因为它已经在.info-pad中 – louisav