Я использую bootstrap 3.0.0

Как разместить вход рядом с меткой?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>

Я пытаюсь поместить выпадающий список прямо рядом с меткой, а не под ней. Как сделать ввод рядом с меткой?

html css twitter-bootstrap twitter-bootstrap-3
0
David Brierton 2 Май 2019 в 23:34

4 ответа

Лучший ответ

Чтобы отобразить элементы рядом друг с другом, используйте display:inline-block (или вы можете использовать flex с flex-direction of row, если вы использовали flex-box, но это на другой день). Вы используете Bootstrap CSS, но вы можете добавить свои собственные CSS. Именно потому, что css предопределен в начальной загрузке, мне пришлось добавить !important перед атрибутом inline-block.

Я добавил класс «label-control» на ваш ярлык. Вы можете добавить класс form-control и задать им одинаковый размер, но затем вы можете убрать границу с метки, добавив label.form-control{border:none;}, если вы это сделаете. Создав новый класс, вы можете по-разному определять размеры элементов.

Надеюсь это поможет

.label-control {
  border: none;
  padding: 10px;
  max-width: 30%;
}

.form-control {
  display: inline-block!important;
  vertical-align: middle;
  max-width: 60%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID" class="label-control">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>
1
Rachel Gallen 2 Май 2019 в 21:08

Возможно, это не самое элегантное решение, но вы можете использовать табличную функцию HTML: https: //www.w3schools .com / HTML / html_tables.asp

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<table>
  <div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <tr>
      <th><label for="zipID">Zip Code:</label></th>
      <th>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
      </th>
    </div>
  </div>
  </div>
</table>
</tr>
0
Ashton Hauser 2 Май 2019 в 21:04

Вы можете сделать это с помощью CSS. Вот ваш пример, работающий как нужно, используя несколько свойств CSS и родительский DIV. Это также можно сделать с помощью сетки начальной загрузки.

`

        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <div style="white-space: nowrap">
                        <label style="display: inline-block">Zip Code:</label>
                        <select name="zipID" id="zipID" style="display: inline-block" required
                            message="Please select a zip code.">
                            <option value="">Please Select</option>
                            <option value="34201" class="notranslate">34201</option>
                            <option value="34202" class="notranslate">34202</option>
                            <option value="34203" class="notranslate">34203</option>
                            <option value="34204" class="notranslate">34204</option>
                            <option value="34205" class="notranslate">34205</option>
                            <option value="34207" class="notranslate">34207</option>
                            <option value="34208" class="notranslate">34208</option>
                            <option value="34209" class="notranslate">34209</option>
                            <option value="34210" class="notranslate">34210</option>
                            <option value="34211" class="notranslate">34211</option>
                            <option value="34212" class="notranslate">34212</option>
                            <option value="34281" class="notranslate">34281</option>
                            <option value="34215" class="notranslate">34215</option>
                            <option value="34216" class="notranslate">34216</option>
                            <option value="34217" class="notranslate">34217</option>
                            <option value="34219" class="notranslate">34219</option>
                            <option value="34221" class="notranslate">34221</option>
                            <option value="34222" class="notranslate">34222</option>
                            <option value="34228" class="notranslate">34228</option>
                            <option value="34243" class="notranslate">34243</option>
                            <option value="34251" class="notranslate">34251</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>`
0
david McDougald 2 Май 2019 в 21:11

Вы можете использовать класс form-inline для достижения своей цели:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
      <div class="form-group form-inline">
        <label for="zipID">Zip Code:</label>
        <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
                <option value="">Please Select</option>
                <option value="34201" class="notranslate">34201</option>
                <option value="34202" class="notranslate">34202</option>
                <option value="34203" class="notranslate">34203</option>
                <option value="34204" class="notranslate">34204</option>
                <option value="34205" class="notranslate">34205</option>
                <option value="34207" class="notranslate">34207</option>
                <option value="34208" class="notranslate">34208</option>
                <option value="34209" class="notranslate">34209</option>
                <option value="34210" class="notranslate">34210</option>
                <option value="34211" class="notranslate">34211</option>
                <option value="34212" class="notranslate">34212</option>
                <option value="34281" class="notranslate">34281</option>
                <option value="34215" class="notranslate">34215</option>
                <option value="34216" class="notranslate">34216</option>
                <option value="34217" class="notranslate">34217</option>
                <option value="34219" class="notranslate">34219</option>
                <option value="34221" class="notranslate">34221</option>
                <option value="34222" class="notranslate">34222</option>
                <option value="34228" class="notranslate">34228</option>
                <option value="34243" class="notranslate">34243</option>
                <option value="34251" class="notranslate">34251</option>
              </select>
      </div>
  </div>
</div>

Обратитесь к встроенной форме для получения дополнительной информации. Или, может быть, вы на самом деле пытаетесь горизонтальная форма.

0
Izzy Ahmad 3 Май 2019 в 01:48

Похожие вопросы

30 Как отключить автозаполнение в браузере в тегах поля / ввода веб-формы?
15 <button> против <input type = "button" />. Что использовать?
23 Выровнять текст рядом с изображением по вертикали?
12 Как создать флажок с интерактивной меткой?
3 Невозможно отобразить строку HTML
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Проверка пользователя Node JS с использованием базы данных
2 Фавикон React.js не меняется
3 Я сделал адаптивный веб-сайт и включил переключаемое меню, но оно не работает
6 Белый текст в меню
2 Мое фоновое изображение Wrapper не отображается
3 Как отобразить пользовательский текст из выпадающего списка
3 Социальные кнопки застряли посередине
2 Отключить перенос для iframe
3 Как разместить таблицу в правой части экрана с помощью HTML?
4 Как сделать так, чтобы вся ссылка <div> затемнялась при наведении?
Все вопросы по теме html >

html

HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].

Подробнее про html...