twitter-bootstrap - 像 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; 没什么不好和 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>