如何对齐这些按钮？

Question

 a.cr-button { border: solid blue; } .job-entry a { height: 65px; margin: 5px; display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;"> <div class="job-entry row large-text" style="display:table-row;"> <div style="display:table-cell;width:75px;"> <a class="btn cr-button pad"> <img src="http://dummyimage.com/64x64/000/fff" width="50"> </a> </div> <div style="display:table-cell"> <a class="btn cr-button pad-lg" href="#">Test Job 1</a> </div> <div style="display:table-cell;width:75px;"> <a href="/Builder/DeleteJob" class="btn cr-button pad"> <img src="http://dummyimage.com/64x64/000/fff" width="50"> </a> </div> </div> </div> 

那么我该如何排列这三个锚点？ 我已经尝试在每个有意义的标签中对每个有意义的值进行vertical-align 。

JsFiddle版本

Answer 1

您需要将div元素的vertical-align设置为top ，而不是其中包含的a元素：

<div style="vertical-align:top; display:table-cell">
    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>

Answer 2

像这样

 .cr-button { border: solid blue; } .job-entry a { height: 65px; margin: 5px; display: block; } .block{vertical-align: top;} 

  <div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;"> <div class="job-entry row large-text" style="display:table-row;"> <div class="block" style="display:table-cell;width:75px;"> <a class="btn cr-button pad"> <img src="http://dummyimage.com/64x64/000/fff" width="50"> </a> </div> <div class="block" style="display:table-cell"> <a class="btn cr-button pad-lg" href="#">Test Job 1</a> </div> <div class="block" style="display:table-cell;width:75px;"> <a href="/Builder/DeleteJob" class="btn cr-button pad"> <img src="http://dummyimage.com/64x64/000/fff" width="50"> </a> </div> </div> </div>