html - 如何在一行中放置两个带边距的文本字段？

Question

我试图通过在 .inline 类中应用 float: left; 属性，将两个输入字段放在一行中。

但是，因为所有 input[type="text"] 都有一个 margin: 5px;，它只适用于 width: 50% 仅当我删除边距时。

边距为 5:

没有任何边距:

什么是理想的解决方案？

这是代码笔链接:http://codepen.io/biskotaki/pen/YXdYYE?editors=110

Answer 1

input[type="text"]
{
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
}

.inline input {
  float: left;
  width: calc(50% - 10px);
  margin:5px;
}

http://fiddle.jshell.net/fL0gm3h9/