Как отделить форму с горизонтальной линией

Question

в моем HTML-страницы Я Div с CSS:

padding: 0px; 
color: rgb(51, 51, 51); 
background: none repeat scroll 0% 0% rgb(255, 255, 255); 
position: relative; 
overflow: visible; 

в этом DIV У меня есть форма и горизонтальная линия:

<hr color="#424242" size="2"> 

Как я могу добавить это это строка после формы? его пример работы на большом экране, но когда я вижу мою страницу на телефонной линии рядом с Div

Answer 1

Если у вас нет особой причины использовать презентационную и нестандартную разметку как <hr color="#424242" size="2">, опускаем этот элемент и использовать CSS вместо того, чтобы нарисовать нижнюю границу на form элемента:

form { 
    border-bottom: solid #424242 2px; 
} 

При желании, добавить некоторые padding-bottom и/или margin-bottom к этому правилу, чтобы создать вертикальное расстояние до и/или после строки, соответственно.

Если вам нужно использовать разметку, см. Мой комментарий к вопросу. Но какова бы ни была причина проблемы, подход CSS должен избегать этого, поскольку при присоединении горизонтальной линии к элементу form.

Answer 2

Вы можете использовать CSS:

clear: both; 

Чтобы сделать DIV ясно (или гибнуть) другой элемент.

Это вы имеете в виду?

Answer 3

hr { 
border-bottom: 1px solid #424242; 
clear: both; 
display: block; 
margin-bottom: 10px; 
padding-top: 10px; 
width: 100%; 

}