Question

我有12个文本框，如下所示。我想将它们排成一行，因此总是在顶部和底部出现相同数量的框。例如，它可能是2行6，或者在另一个屏幕宽度，它可能是3行4个盒子。我也希望行之间有空格，所以看起来更好。最后，他们应该排队，我注意到我的底行似乎有一个额外的空间，所以顶部和底部的行没有完美对齐。

这样做的最佳方式是什么？

<input name="Neighborhood1" type="text" id="Neighborhood1">
<input name="Neighborhood2" type="text" id="Neighborhood2">
<input name="Neighborhood3" type="text" id="Neighborhood3">
<input name="Neighborhood4" type="text" id="Neighborhood4">
<input name="Neighborhood5" type="text" id="Neighborhood5">
<input name="Neighborhood6" type="text" id="Neighborhood6">
<input name="Neighborhood7" type="text" id="Neighborhood7">
<input name="Neighborhood8" type="text" id="Neighborhood8">
<input name="Neighborhood9" type="text" id="Neighborhood9">
<input name="Neighborhood10" type="text" id="Neighborhood10">
<input name="Neighborhood11" type="text" id="Neighborhood11">
<input name="Neighborhood12" type="text" id="Neighborhood12">

Answer 1

可以在不加载引导程序的情况下使用。基本上你想要的是在不同断点处的12个输入的流畅布局。我使用Susy进行计算，但它实际上只是百分比宽度和媒体查询。不确定这是否是您正在寻找的。

@media only screen and (max-width: 319px) {
input {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
input {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
}
input:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}

JSFiddle

如何排列文本框并平衡它们？

1 个答案: