作为Daily UI挑战(#002)的一部分,我制作了一个小表格,有可能获取信用卡详细信息。我还没有实现任何功能,只是设计。
这是我填写的表格:http://codepen.io/alanbuchanan/pen/vGZPBp
我的问题是关于表格的两个半角部分-到期日期和抄送号码。
这是相关的代码-该代码针对包装两个表单元素的两个div:
div {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
我将这两部分包装在各自的div中,以便可以更好地控制它们的位置。没有这些包装div,是否可以将其放置为半角?
在该示例中,它们占据了45%的宽度,因为在50%时,第二个div溢出到下一行。
我只想给它50%的空间,使其占据应有的一半空间。还是不应该?
即使宽度为45%,您也可以看到这两个div的高度之间大约有1px的差异。
使用Chrome开发工具进行检查后,我找不到此问题。
我的问题的任何答案或针对情况的不同方法将非常有用。
最佳答案
在大多数情况下,以下代码的设置可能是针对创建inline-block
列的最佳实践。
.column-container {
font-size:0;
line-height:0;
}
.column-container .column {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:120%;
}
您可能想知道,为什么容器的
font-size
和line-height
为零?由于某些HTML代码包含缩进代码,因此通常使用该代码,例如:
<div class="column-container">
<div class="column">text</div>
在此示例中,您可以看到在对div列进行编程之前,容器div包含空格/制表符。这些空格/制表符呈现为字符,因此它们将遵循css告诉字符在该容器div中执行的操作。