Как в форме чекбоксы расположить в линию?

Question

[blackbb]

Здравствуйте. Есть форма, необходимо чтобы checkbox в них был в линию. Задать чекбоксам отдельный div не могу, форма генерируется автоматически движком.

<form action="" method="post" enctype="multipart/form-data">
<div class="forms">
    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_title">Название:</label> <input id="id_title" maxlength="200" name="title" placeholder=" Например: Гостиница &quot;Николь&quot;" size="70" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_slug">URL:</label> <input id="id_slug" maxlength="50" name="slug" type="text"></p>
    </div>
    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_telefon">Телефоны:</label> <input id="id_telefon" maxlength="150" name="telefon" placeholder="Например: [phone], [phone]" size="70" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_contact">Контактное лицо:</label> <input id="id_contact" maxlength="100" name="contact" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_adress">Адрес:</label> <input id="id_adress" maxlength="100" name="adress" placeholder="Например: г.Анапа, ул.Зеленая, дом 15" size="70" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_email">Email:</label> <input id="id_email" maxlength="254" name="email" type="email"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_sait">Сайт:</label> <input id="id_sait" maxlength="200" name="sait" placeholder="http://mysite.ru" size="30" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_distance">Расстояние до моря:</label> <input id="id_distance" maxlength="20" name="distance" type="text"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_raschet">Расчетный час:</label> <input id="id_raschet" name="raschet" type="text" value="12:00:00"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_pitanie">Питание:</label> <input id="id_pitanie" name="pitanie" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_stoyanka">Стоянка:</label> <input id="id_stoyanka" name="stoyanka" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_bassein">Бассейн:</label> <input id="id_bassein" name="bassein" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_internet">Интернет:</label> <input id="id_internet" name="internet" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_sauna">Баня, Сауна:</label> <input id="id_sauna" name="sauna" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_dvor">Территория, двор:</label> <input id="id_dvor" name="dvor" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_tv">Путниковое ТВ:</label> <input id="id_tv" name="tv" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_beach">Собственный пляж:</label> <input id="id_beach" name="beach" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_child">Детская площадка:</label> <input id="id_child" name="child" type="checkbox"></p>
    </div>

    <div class="fieldWrapper">
        <p></p>
        <p><label for="id_files">Фотографии:</label> <input id="id_files" multiple="multiple" name="files" type="file"></p>
    </div>
     <button class="btn btn-primary" type="submit" name="submit">Добавить</button>
</form>

Comments

[Stalker_RED]

Что значит "в линию"?
Это вот в линию, или нет? jsfiddle.net/kryfye9r

[blackbb]

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

Answer 1

[Дмитрий Беляев]

Попробуйте так:

.fieldWrapper:has(input[type="checkbox"]) {
    display: inline-block;
    float: left;
}
.fieldWrapper:has(input[type="file"]) {
    clear: both;
}

Comments

[blackbb]

Не видит этих стилей форма.

[Дмитрий Беляев]

blackbb: :has довольно новый селектор, старыми браузерами не поддерживается.
И кто мешает залезть в код движка и поправить генерацию формы или же вообще не генерировать форму движком?

[blackbb]

Залезть можно, но там нет возможности прописать стили отдельным элементам формы. А вот ручками не вариант, потому что элементы будут меняться и каждый раз их менять не хочется.

[Дмитрий Беляев]

blackbb: если залезть можно, сделайте чтоб в класс или атрибут тега <div class="fieldWrapper"> прописывался type input'а и по нему уже работайте из стилей