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>

什么是创建像Bootstrap但没有Flex的输入组的最佳方法？

1 个答案: