我使用 bootstrap 和 HTML 创建了一个简单的日历,我想在头部的月份名称旁边添加箭头。 我无法对齐箭头和月份:
这是我目前的代码:
<table border="0" cellpadding="0" cellspacing="0" class="table table-bordered table-striped month">
<tr><th colspan="7" class="month-head month">
<div>
<div><span class="pull-left"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
</div>
<div style="margin:0 auto;"> April 2017 </div>
<div><span class="pull-right"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</div>
</div></th></tr>
<tr><th class="mon text-center">Mon</th><th class="tue text-center">Tue</th><th class="wed text-center">Wed</th><th class="thu text-center">Thu</th><th class="fri text-center">Fri</th><th class="sat text-center">Sat</th><th class="sun text-center">Sun</th></tr>
...
</table>
你能帮我对齐右箭头吗?
最佳答案
你可以使用display: flex;对齐元素:居中; justify-content: space-between
在这 3 个元素的父元素上。
.top-row {
display: flex;
align-items: center;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="top-row">
<div><span><i class="fa fa-arrow-left" aria-hidden="true"></i></span></div>
<div> April 2017 </div>
<div><span><i class="fa fa-arrow-right" aria-hidden="true"></i></span></div>
</div>
关于html - 水平对齐 HTML 表头中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43667851/