Почему всегда так сложно выровнять элемент по вертикали - PullRequest
Новая
       22

Почему всегда так сложно выровнять элемент по вертикали

0 голосов
/ 10 апреля 2019

Пожалуйста, проверьте мой пример.Я просто хочу выровнять кнопку с вводом по вертикали.У меня есть этикетки, и они должны остаться там.Я просто хочу вертикально выровнять кнопку на сером фоне. 

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
    }
    
    input {
    width: 100%;
    }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-12 tab-topbar">
  <div class="row">
    <div class="col-sm-6">
    <label>asasasfasgasgaaaga</label><br>
    <label>asasasfasgasgaaaga</label><br>
    <input />
    </div>
    <div class="col-sm-6">
      <div class="text-right">
          <button>LOL</button>
      </div>
  </div>
</div>

Ответы [ 5 ]

1 голос
/ 10 апреля 2019 

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
    }
input {
Width: 100%;
margin-right: 10px !important;
}
.flexedDiv {
display: flex;
}
    
    
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-12 tab-topbar">
  <div class="row">
<div class="col-sm-12">
<label>asasasfasgasgaaaga</label><br>
    <label>asasasfasgasgaaaga</label><br>
</div>
    <div class="col-sm-12 flexedDiv">
    
    <input />
<button>LOL</button>
    </div>
    
  </div>
</div>

Используйте эту структуру и изгибайте в css, это облегчит вашу жизнь

1 голос
/ 10 апреля 2019

Используйте width и display:inline-block, чтобы расположить эти элементы в одной строке. 

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
    }
    
    input {
    width:88%;display:inline-block
    }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-12 tab-topbar">
  <div class="row">
    <div class="col-sm-6">
    <label>asasasfasgasgaaaga</label><br>
    <label>asasasfasgasgaaaga</label><br>
   
    </div>
    <div class="col-sm-6">
 <input />        
          <button style="width:10%;display:inline-block">LOL</button>
  
  </div>
</div>
1 голос
/ 10 апреля 2019

Вы можете решить эту проблему, используя display:flex и переместить input поле внутрь text-right класса.

Вот обновленная скрипка: 

.tab-topbar {
  background-color: #e0e0e0;
  padding: 20px;
  margin-top: 5px;
  border: 1px solid #ccc;
}

input {
  width: 100%;
}

.text-right {
  display: flex;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-12 tab-topbar">
  <div class="row">
    <div class="col-sm-6">
      <label>asasasfasgasgaaaga</label><br>
      <label>asasasfasgasgaaaga</label><br>

    </div>
    <div class="col-sm-6">
      <div class="text-right">
        <input />
        <button>LOL</button>
      </div>
    </div>
1 голос
/ 10 апреля 2019

использовать кнопки дополнений 

 <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">LOL</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
0 голосов
/ 10 апреля 2019

Это может быть решено с помощью Flexbox, и вам нужно обновить свою структуру.Попробуйте это, я надеюсь, это поможет вам.Спасибо 

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
}

.formField {
  display: flex;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="tab-topbar">
  <label>asasasfasgasgaaaga</label><br>
  <label>asasasfasgasgaaaga</label><br>
  <div class="formField">
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    <button type="submit" class="btn btn-default">Confirm identity</button>
  </div>
</div>
...