Блог

Главная - Вопросы по программированию - Сделать чекбокс, поля выбора и ввода встроенными

Сделать чекбокс, поля выбора и ввода встроенными

#html #twitter-bootstrap #css

#HTML #twitter-bootstrap #css

Вопрос:

Я пытаюсь создать панель поиска, в которой зеленый div будет находиться в середине серого (см. http://codepen.io/anon/pen/LRBEvq?editors=1100 ), а также флажки, выпадающее меню выбора и поле ввода — все встроенные с двумя кнопками — так что все в одной строке. Я использую Bootstrap, чтобы сделать его отзывчивым, но застрял и не могу разобраться.. спасибо за всю помощь!

Вот мой html:

 .main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                 <label class="checkbox-inline">
                   <input type="checkbox" value="" checked>Lorem
                 </label>
                 <label class="checkbox-inline">
                   <input type="checkbox" value="">Ipsum
                 </label>
               </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Ответ №1:

Используйте display: inline-block; для того, чтобы ваши divs-обертки вели себя как встроенные элементы, не теряя своих свойств блока:

 .mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}

Если вы также хотите, чтобы кнопки находились в одной строке, используйте a <div class="col-md-12"> для всего содержимого.

Чтобы центрировать строку меню по горизонтали, используйте margin: 0 auto; ; чтобы центрировать ее по вертикали, расположите ее, примените a top: 50%; и переведите ее обратно на половину ее размера в отрицательном направлении y (вверх):

 .formContainer {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

Чтобы сделать текстовое поле ввода таким же длинным, как оставшееся пространство, просто установите ширину ввода такой же, как и его оболочка div:

 .mainContent .choice-input input {
    width: inherit;
}
 
 .main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}
.mainContent .choice-input input {
  width: inherit;
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-12">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Комментарии:

1. Спасибо! У меня все еще есть проблема с зеленым прямоугольником, находящимся в середине серого.. Я попытался установить его высоту и ширину на определенный процент и позицию, но если мне удастся это сделать, он сломается при изменении размера окна. И я не могу понять, почему поле ввода не принимает .choice-input {width: 390px;} , поскольку оно должно занимать все пространство вплоть до кнопок. Еще раз спасибо за эти советы, очень полезные!

2. Под «серединой» вы имеете в виду горизонтальный или вертикальный центр?

3. извините, горизонтальный и вертикальный, как поле в поле

4. итак, .formContainer @Andreas

5. Если ваш вопрос теперь касается отзывчивости, просто задайте новый вопрос 🙂

Ответ №2:

Горизонтальное центрирование:

Для горизонтального центрирования мы хотим, чтобы левое и правое поля были равными. Способ сделать это — установить для полей значение «auto». Обычно это используется с блоком фиксированной ширины, потому что, если сам блок является гибким, он просто займет всю доступную ширину.

Вертикальное центрирование:

Основными правилами являются:

  1. Сделайте контейнер относительно позиционированным, который объявляет его контейнером для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его на полпути вниз по контейнеру с надписью «top: 50%». (Обратите внимание, что 50%’ здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх на половину его собственной высоты. (‘50%’ в ‘translate (0, -50%)’ относится к высоте самого элемента.)

Итак, ваш код может выглядеть так

 .main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  position: relative;
}

.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Я надеюсь, что вы решили все остальные проблемы.

Комментарии:

1. Прочитайте о свойстве flex-box Это новое свойство CSS3 для гибкого выравнивания полей.

Ответ №3:

Попробуйте изменить эти правила:

 .checkbox, .radio {
    position: relative;
    display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-select {
    width: 173px;
    display: inline-block; // added inline-block
}

.choice-input {
    width: 176px; // reduced width.
    display: inline-block; // added inline-block
}

Ответ №4:

Проверьте приведенный ниже код, я поместил элементы управления html в отдельные разделы с классами bootstrap grid, чтобы сделать их встроенными и добавленными margin: 0 auto в .formContainer класс

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->
            <div class="col-md-4">
            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
             </div>

            <div class="col-md-4">
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            </div>

            <div class="col-md-4">
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>




.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
  margin: 0 auto;

}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

Комментарии:

1. Спасибо! вот что у меня получилось: codepen.io/anon/pen/WGKOmB однако он по-прежнему не реагирует, так как флажки слева смещаются, как и в строке поиска … кроме того, кнопки расположены одна под другой, но они должны быть встроенными. может быть, вы видите, где я допускаю ошибку ..? @arsinawaz

Ответ №5:

Вы должны быть в состоянии делать то, что хотите, только с начальной загрузкой. Я раздвоил ваше перо и немного изменил его:

http://codepen.io/ugreen/pen/XjBpqX

 <div class="container">
    <div class="row">

            <div class="col-md-3 text">
                Lorem lorem lorem
                <div class="pull-right">Ipsum lorem ipsum</div>
            </div>

            <div class="col-md-5">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="checkbox" value="" checked>
                        <label>Lorem</label>
                        <input type="checkbox" value="">
                        <label>Ipsum</label>
                    </div>
                    <div class="form-group">
                        <select class="form-control choice-select">
                            <option value="one">One</option>
                            <option value="two">Two</option>
                            <option value="three">Three</option>
                            <option value="four">Four</option>
                            <option value="five">Five</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Placeholder text">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="button-group">
                    <button class="btn btn-default">Lorem ipsum lorem</button>
                    <button class="btn btn-default">Lorem lorem lorem</button>
                </div>
            </div>
        </div>
    </div>
</div>

Но, возможно, было бы еще лучше сделать что-то вроде в документах bootstrap о навигационных панелях:
http://getbootstrap.com/components/#navbar

Комментарии:

1. Интересно, я пойду и попытаюсь изменить свой код, чтобы сделать это, спасибо!

2. это то, что у меня есть на данный момент: codepen.io/anon/pen/WGKOmB но он по-прежнему не реагирует, так как флажки слева смещаются, как и в строке поиска … кроме того, кнопки расположены одна под другой, но я бы хотел, чтобы они были встроены во всеостальное.. @ugreen

3. Не рекомендуется устанавливать ширину в пикселях, как у ваших элементов, при использовании bootstrap. Материал распадется, как вы видели. Что вы ожидаете увидеть на экранах меньшего размера? Должно ли все оставаться в одной строке? или каким должен быть макет для размеров таблиц и мобильных устройств?

4. Я хотел бы сложить его один под другим, поэтому установите флажок в одной строке, выберите поле в следующей строке и т.д..

Метки: