试图让文本框在文本旁边对齐

Question

<div class="currency-contanier">
   <div class="col-md-6">12</div>
   <div class="col-md-6">
        <input class="form-control valid" data-val="true" data-val-number="The field CADDay must be a number." data-val-required="The CADDay field is required." id="CADDay" name="CADDay" type="text" value="12" aria-required="true" aria-invalid="false" aria-describedby="CADDay-error">
   </div>
</div>

和css ......

.currency-contanier {
    height: 90px;
    line-height: 90px;
    text-align: center;
    border: 2px dashed #f69c55;
}

在我的开发框中，它看起来像这样：

我希望他们都能在两个方向上居中..换句话说，将文本框向下移动，使其在文本旁边。

Answer 1

您的HTML结构分别缺少容器和行类和div：

<div class="contanier">
   <div class="row">
      <div class="currency-contanier">
         <div class="col-md-6">12</div>
         <div class="col-md-6">
               <input class="form-control valid" data-val="true" data-val-number="The field CADDay must be a number." data-val-required="The CADDay field is required." id="CADDay" name="CADDay" type="text" value="12" aria-required="true" aria-invalid="false" aria-describedby="CADDay-error">
          </div>
       </div>
    </div>
 </div>

此外，您只需要在输入中添加：display:inline-block;，它将位于12旁边。无需声明宽度，因为它使用bootstraps表单控件类，它提供输入width:100%;相对于其父容器。

Answer 2

制作input元素inline并限制其width：

.currency-contanier input {
  display: inline;
  width: 3em;
}

http://codepen.io/anon/pen/vyrRqE