Question

我制作了一个小型表格，有可能获取信用卡详细信息，作为Daily UI挑战的一部分（＃002）。我还没有实现任何功能，只是设计。

以下是我制作的表格：http://codepen.io/alanbuchanan/pen/vGZPBp

我的问题是关于表格的两个半宽部分 - 到期日期和CC编号。

以下是相关代码 - 这是针对包装两个表单元素的两个div：

  div {
    display: inline-block;
    box-sizing: border-box;
    width: 45%;
  }

我将这两个部分包装在自己的div中，以便我可以更好地控制它们的位置。没有这些包装器div，是否可以将它们放在半宽处？
在示例中，它们占据了45％的宽度，因为在50％时，第二个div溢出到下一行。

我只想给它50％，并让它占用一半的空间。或者不应该？

即使宽度为45％，您也可以看到这两个div的高度差异大约为1px。

在使用Chrome开发工具进行检查后，我无法找到问题背后的问题。

对我的问题的任何答案或对情况的不同处理方法都非常有用。

Answer 1

在大多数情况下，如果要创建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中执行的任何操作。

Answer 2

您可以使用flexbox。创建一个id为flexdiv的外部div，它将包含到期div和CC编号。

然后编写以下代码：

#flexdiv
{
 display: flex;
 justify-content: space-between;
 div{
    display:inline-block;
    box-sizing: border-box;
    width:49%;
 }
}

Codepen Example

以下是flexbox的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

笔：http://codepen.io/anon/pen/jqwJMg

评论：只需在表单中添加font-size:0即可。这些是我所做的改变：

.minicontainer {
    width:50%;
}
form {
    font-size:0;
}

当你添加两个内联元素（50％-50％）时，你应该确保font-size为零

半宽内嵌块元素会导致奇怪的位置问题

3 个答案: