将输入对齐div中的左侧

时间:2017-09-27 20:26:11

标签: javascript jquery html css

我有div有2个div

在一个div中是文本,在第二个输入中

这是代码

<div id="main-info" style="margin-top: 30px;">
  <div class="row">
    <div class="col-xs-6 blue-text">
      Diffuculty of investigation
    </div>
    <div class="col-xs-6">
      <input class="form-control"/>
    </div>
  </div>
</div>

和CSS

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  position: relative;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  margin: 0 auto;
  background-color: #fff;
  border-color: #1f66b4;
  border-style: solid;
  border-width: 3px;
  background-image: none;     
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

我有这样的观点 enter image description here

但我需要这样做 enter image description here

因此输入将更接近文本。

我需要如何重写代码?

1 个答案:

答案 0 :(得分:1)

<div class="row">
  <div class="xs-hidden col-md-2 "></div>
  <div class="col-xs-6 col-md-4 blue-text">
    Diffuculty of investigation
  </div>
  <div class="col-xs-6 col-md-4 ">
    <input class="form-control"/>
  </div>
  <div class="xs-hidden col-md-2 "></div>
</div>