Выравнивание ввода аддонов кнопки с текстом - PullRequest
Новая
       67

Выравнивание ввода аддонов кнопки с текстом

1 голос
/ 31 октября 2019

У меня есть форма с 2 входами, ввод текста и кнопка для отправки формы.

Рядом с этой формой слева находится текст.

Я хочу выровнять этот текстслева с полем ввода текста.

Вот скрипка: https://jsfiddle.net/5vdcb120/1

Код CSS: 

.text, .form{
    display: inline-block;
}

Код HTML: 

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">
  <p class="text">Name:</p>
  <form class="wrapper">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
        </span>        
    </div> <!-- .input-group -->
    <p>Some Text</p>
  <form> <!-- .form-->
</div> <!-- .container -->

Я хочу выровнять текст Name: с классом text с вводом текста, чтобы быть в середине ввода текста.

Я попытался vertical-alignment: middle;, но это не сработало.

Images

Ответы [ 3 ]

0 голосов
/ 31 октября 2019

Вы можете добавить: 

 display: flex; 
 align-items: baseline;

к классу контейнера, чтобы заставить вас работать таким образом.

Удачи с кодировкой! 

.text, .form{
    /*display: inline-block;*/
}

.container {
  display: flex;
  align-items: baseline;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">

  <p class="text">Name: </p>
  <form class="wrapper">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
    <p>Some Text</p>
    </form>
    
</div>
0 голосов
/ 31 октября 2019

Вы можете попробовать использовать CSS Grid Property для класса контейнера: 

.container {
  display: grid;
  grid-template-columns: 0px 50px auto;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">

  <p class="text">Name: </p>
  <form class="wrapper">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
    <p>Some Text</p>
    </form>
    
</div>
0 голосов
/ 31 октября 2019

Я не совсем уверен, что понял ваш вопрос, но, надеюсь, это поможет: https://jsfiddle.net/aoc3g96d/5/

 .text, 
 .form{
  position: relative;
  display: inline-block;
  float: left;
}

.text {
 top: 5px;
 margin-right: 5px;
 
 width: 9%;
 text-align: right;
}

.form {
  width: 90%;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">
<p class="text">Name:</p>
 <form class="form">
  <div class="input-group">
   <input type="text" placeholder="SomeText" class="form-control">
   <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Go!</button>
   </span>
  </div>
 <form>
</div>
...