简体   繁体   中英

Align input to left in div

I have div with 2 divs in it

In one div is text, in second input

Here is code

<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>

And 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;
}

I have View like this在此处输入图片说明

But I need to make it like this在此处输入图片说明

So input will be closer to text.

How I need to rewrite code?

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM