我想在底部的一行中设置链接,例如“链接 1 左下 Angular ”、“链接 2 中心底部”、“链接 3 右下 Angular ”但“链接 2”不在 PC 和移动设备上居中。
HTML:
<div>
<a id="contact" href="/contact">Link 1</a>
<a id="link" href="/repo">Link 2</a>
<a id="api" href="/json">Link 3</a>
</div>
CSS:#contact{
float: left;
font-size: 20px;
padding-top: 0.17em;
}
#api{
float: right;
font-size: 20px;
padding-top: 0.17em;
}
#link{
display: inline;
font-size: 30px;
padding-right: 2.5%;
}
现在的样子最佳答案
您可以使用在 d-flex
和 justify-content-between
类中构建的 bootstrap 来轻松实现。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">
<a id="contact" href="/contact">Link 1</a>
<a id="link" href="/repo">Link 2</a>
<a id="api" href="/json">Link 3</a>
</div>