输入组像 Bootstrap 但没有 Flex？

Question

我想像 Bootstrap 一样从头开始创建一个输入组，我不想使用 Flex，那么创建输入组的最佳方法是什么？我认为旧版本的 Bootstrap 已经使用display: table过，但我听说这不是最好的方法，因为在某些浏览器中，如 Safari 以另一种方式工作......

例如 ：

<div class="iptGroup">
    <span>@</span>
    <input type="text"></input>
</div>

我有这段代码并使用display: table过，但都没有在-webkit-浏览器中工作（宽度有一些问题span），也没有在 Firefox 中工作......

任何答案表示赞赏...

Answer 1

我认为使用display: table;and没什么不好table-cell：

/*QuickReset*/
*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}
input, textarea{font:14px/1.4 sans-serif;}

.input-group{
  display: table;
  border-collapse: collapse;
  width:100%;
}
.input-group > div{
  display: table-cell;
  border: 1px solid #ddd;
  vertical-align: middle;  /* needed for Safari */
}
.input-group-icon{
  background:#eee;
  color: #777;
  padding: 0 12px
}
.input-group-area{
  width:100%;
}
.input-group input{
  border: 0;
  display: block;
  width: 100%;
  padding: 8px;
}

<div class="input-group">
  <div class="input-group-icon">@</div>
  <div class="input-group-area"><input type="text" placeholder="Email Address"></div>
</div>
	
<div class="input-group">
  <div class="input-group-icon">Income:</div>
  <div class="input-group-area"><input type="text" value="0.00"></div>
  <div class="input-group-icon">$</div>
</div>