Select - option в две строки или столбика

@souz21 · Регистрация: 05.09.2011

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста, как сделать select, option в две строки?
Например, есть такая форма:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <div>
    <label>Регион</label>
       <select name="city">
        <option value="">-- Выберите регион --</option>
        <option value=""> - Любой - </option>
        <option name="0" value="Астрахань">Астрахань</option>
        <option name="1" value="Алатырь">Алатырь</option>
        <option name="2" value="Барнаул">Барнаул</option>                
      </select>
</div>
                                            
<div>
   <label>Тип недвижимости</label>                                     
      <select name="typ">    
        <option value=""> - Любое - </option>
        <option value="Квартира">Квартира</option>
        <option value="Дом/Коттедж">Дом/Коттедж</option>
      </select>
</div>

Мне нужно, чтобы напротив Регион, отображался select Тип недвижимости. Т.е, в два столбика, для экономия места, т.к. если продолжать вниз перечислять select, то форма выходит за рамки...

Сейчас выглядит так. Т.е, каждый select с новой строки, а мне нужно в два ряда.

@mrtoxas · 12.07.2016, 12:36

CSS
1
2
3
4
5
6
7
div{
  display:inline-block;
}
/* или */
div{
  float:left;
}

@souz21 · 12.07.2016, 13:07 **[ТС]**

Оформил таким образом, добавив проценты:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div style="float: left; width: 49%;">
 
<label>Тип недвижимости</label>
<select name="">
<option value="Квартира">Квартира</option>
</option>
</select>
 
</div>
 
 
<div style="float: right; width: 49%;">
 
<label>Регион</label>
<select name="">
<option value="Алатырь">Алатырь</option>
</option>
</select>
 
</div>

Получилось так. -Это правильно будет? Или можно более грамотнее? В мобильнике тоже нормально отображается.

@Kraken73 · 14.07.2016, 09:49

Сообщение от souz21

Или можно более грамотнее?

Вынести стили в файл css, задав классы, и не писать inline стили

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .