Вступая в проблему типа clearfix

0

Итак, две дивизии идут в форму

Выглядит так:

<form>
    <div id="top">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
    <div id="bottom">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
</form>

Там некоторые css, позиционирующие все поля формы absolute и left, здесь находится скрипка принципала (Шаг 1)

Поэтому я исправил первую проблему, добавив дополнительные разрывы строк (скрипта на шаге 2).

Это не идеальное решение по двум причинам. Дополнительные элементы в DOM для одного, и... просто посмотрите на него. textarea все еще переполняется в нижний div.

Я нашел временный взлом, когда разные ответы clearfix, которые я попробовал, не работали (в основном из других вопросов SO), вставив:

<hr class="clearfix" /><br />

между ними и давая visibility:hidden hr visibility:hidden в CSS.

Это заставило его работать на моей странице, но, как вы можете видеть здесь (шаг 3), на самом деле это не работает. В форме на моей странице у div есть прозрачные фоны, и это ставит их достаточно далеко друг от друга, и пользователи довольны, так как это форма заказа интрасети (используемая с телефона не менее), а не веб-запуск SVapp, m вид контента, чтобы оставить его производство на данный момент, но в конце концов, каков был правильный способ сделать это?

Как мне получить div.top чтобы охватить весь контент, включая textarea? Я пробовал много решений "идти" для элементов с float, но, как и ожидалось, они не работают, поскольку textarea не float.

В идеале я хочу вырезать дополнительные <br> s и иметь <div> самом деле содержать их контент, не устанавливая вручную каждый элемент или добавляя тонну сложности на страницу. Любые идеи приветствуются.

  • 0
    Нужно ли позиционировать textareas абсолютно или это был только один из подходов? Я хочу сказать, вам нужно, чтобы они были такими для какой-то другой конкретной цели, или мы можем попытаться предложить ответ без position: absolute ?
  • 0
    не обязательно должен быть absolute , но должен держать все элементы input / textarea в прямой линии напротив их меток. Это для строительной компании, и их очень анальный сдерживающий факт о вещах, являющихся прямыми краями.
Теги:

1 ответ

0

Хороший трюк за то, что вы ищете, это использовать Html Description List.

Например, вы можете написать следующее:

<dl id="top">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>
<dl id="bottom">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>

jsfiddle

И вот немного больше css, чтобы он выглядел как ваша скрипка:

#top{
    color:white;
    font-weight:700;
    background-color:blue;
}
#bottom{
    font-weight:700;
    background-color:red;
}

dl {
    padding: 0.5em;
    height: 100%;
    display: table;
}

dt {
    float: left;
    clear: left;
}

dd {
    float: right;
    clear: right;
}

играть на скрипке

редактировать

О проблеме с ярлыком не является излишним - существует простое решение, использующее атрибут "для". Вот пример:

<dt><label for="number1">Gimme a Number:</label></dt>
<dd><input id="number1" type="number" /></dd>

обновленная скрипка

Ваше первоначальное использование метки:

<label>Gimme a Number:<input type="number" /></label><br />

свяжут два тега вместе и не должны использоваться. Плюс, говоря о семантике, должен ли вход действительно быть частью ярлыка?

Принимая во внимание ваш комментарий о не семантическом использовании dd/dt, вы можете легко переключаться между dt и dd, как эта скрипка. Вот обновленный пример:

<dd><label for="number1">Gimme a Number:</label></dd>
<dt><input id="number1" type="number" /></dt>

Теперь у нас есть семантический HTML, где CSS заботится о выборе дизайна.

Изменить 2

новая скрипка - нет необходимости в height: 100%; на dl

  • 0
    это несемантическое использование для dd / dt , в том dt , что описание должно быть в dd а элемент формы должен быть в dt , и он все еще не имеет фиксированного выравнивания по левому краю для элементов формы. Кроме того, тег label не лишний, поскольку он позволяет пользователям нажимать либо элемент формы, либо метку для ввода данных, что очень важно для мобильных пользователей с колбасой, таких как я. :)
  • 0
    Слишком много , чтобы записать в комментариях, я добавил раздел Edit в мой оригинальный ответ :)
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню