作为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溢出到下一行。


html - 半 Angular 内联块元素会引起奇怪的位置问题-LMLPHP

我只想给它50%的空间,使其占据应有的一半空间。还是不应该?


即使宽度为45%,您也可以看到这两个div的高度之间大约有1px的差异。


html - 半 Angular 内联块元素会引起奇怪的位置问题-LMLPHP

使用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-sizeline-height为零?

由于某些HTML代码包含缩进代码,因此通常使用该代码,例如:

<div class="column-container">
      <div class="column">text</div>




在此示例中,您可以看到在对div列进行编程之前,容器div包含空格/制表符。这些空格/制表符呈现为字符,因此它们将遵循css告诉字符在该容器div中执行的操作。

10-07 19:01
查看更多