我正在尝试创建一个由三部分组成的简单页面导航：
>几个以前的页码(如果有的话)
>当前页码(必须居中)
>一些即将到来的页码(如果有的话)
重要的是当前页码始终在父容器中水平居中.其他两个部分应均匀占据剩余的水平空间.
解决方案1：使用text-align：center.这实现了期望的结果,但仅在两侧宽度相等的情况下.如果不是,则当前页码不在中心.
HTML
@H_404_14@<div class="container"> <input type="button" value="47"> <input type="button" value="48"> <input type="button" value="49"> <input type="text" size="5" maxlength="5" value="50"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div>CSS
@H_404_14@.container,input { text-align: center; }解决方案2：使用手动指定的宽度均匀分布水平空间.这有效地将当前页码的中心置于所有情况下,但它需要您对宽度进行硬编码.
HTML
@H_404_14@<div class="container"> <div class="left"> <input type="button" value="47"> <input type="button" value="48"> <input type="button" value="49"> </div> <div class="right"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div> <div class="center"> <input type="text" size="5" maxlength="5" value="50"> </div> </div>CSS
@H_404_14@.left { width: 40%; float: left; text-align: right; } .right { width: 40%; float: right; text-align: left; } .center { width: 20%; margin-left: 40%; }这些解决方案都没有真正做到我想要的.有没有办法让当前页码居中,同时允许其他元素与其自然大小对齐,而不是任意像素或百分比宽度？
解决方法
你应该使用
flex和浮动属性,检查我的解决方案：
@H_404_14@.container {
display: -webkit-flex; /* Safari */
display: flex;
}
.container,input {
text-align: center;
}
.container:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
}
.left {
display: inline-block;
flex: 1;
}
.left input {
float: right;
}
.right {
display: inline-block;
flex: 1;
}
.right input {
float: left;
}
.center {
display: inline-block;
}
@H_404_14@<div class="container">
<div class="left">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
