我一直在尝试使用 HTML 和 CSS(没有 Flexbox 或 JS)让三位文本(样式看起来像按钮)在左、中和右对齐,但没有成功。如何实现?这就是我需要的:
这是我的代码:
#row1 {padding: 20px 20px 5px 20px;
overflow: hidden; }
.button-container {display: block; text-align: center;}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: left;
font-size: 75%; }
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: right;
font-size: 75%; }
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">issue</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div><!--close button-container">
</div><!--close r1-->
最佳答案
Flexbox 是解决此类问题的理想选择:
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">index</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div>
</div>
没有 Flexbox 的替代方案:
* {margin: 0; padding: 0; box-sizing: border-box}
#row1 {padding: 20px 20px 5px 20px}
.button-container {position: relative}
.button-left {
position: absolute;
left: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-right {
position: absolute;
right: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-centre {
position: absolute;
left: calc(50% - 17px);
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">issue</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div>
</div>
所做的更改:.button-container {position: relative}
,还为所有 children 添加了 position: absolute
和适当的 left 和 right
properties 的 >values,对于 middle child value left
property calc(50% - 17px)
是根据它的宽度计算的( padding
和 border
包括),即 34px
除以 2 并从 50%
中扣除。
关于html - 如何使用 HTML 和 CSS 将三位文本左、右、中对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46541836/