CSS: до того, как сам float плавает

Question

У меня есть что-то вроде разметки:

<label/><input/><label/><input/>

И я хочу разместить надписи слева от входов с шириной надписей.Если текст метки переносится, я бы хотел, чтобы он нажал следующую метку и ввел.

Решение, которое я пытаюсь использовать, работает следующим образом

label { float: left; clear: left; width: 25% }
label:before { content: " "; display: block; float: none; clear: left; }

Однако это не работает.Фактически, если я заменю «» на «a», я могу видеть, что сгенерированный контент в: before действует так, как будто это float: left, даже с float: нет там!

EDIT В основном я пытаюсь понять , почему вышеуказанный CSS ведет себя так, как он.Любые решения на чистом CSS тоже были бы классными, но я не смотрю на стиль, меняя разметку:)

Демонстрация проблемы в https://singpolyma.net/so-5080542.html, вы можете увидеть красный "см.здесь «текст плавает влево с меткой, вместо того, чтобы очищать все и находиться на отдельной строке, как я и ожидал.

Есть идеи?

Answer 1

Вот мое решение . Это почти из-за вашей input, которая имеет свойство блока. Сделайте это float:left, и это, кажется, работает, как вы ожидали. Это все?

Answer 2

Найден сайт, говорящий об этом: http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

.container-with-generated-content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

Answer 3

Я не совсем понимаю, чего вы пытаетесь достичь, но я надеюсь, что понял правильно. Попробуйте:

<div>
  <label>Label</label>
  <input type="text" />
</div>

<div>
  <label>Label 2</label>
  <input type="text" />
</div>

CSS:

label {
    width: 25%;
    float: left;
    display: block;
}

div {
    clear: left;
}

Answer 4

Я знаю, что он устарел, но попробуйте этот код ниже.Я попробовал его на Вашем коде, и он работает.

label:before{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Это решение исходит из: http://css -tricks.com / snippets / css / clear-fix /

Answer 5

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