2017-02-19 7 views
0

Я новичок в создании интерактивных веб-страниц. У меня возникают проблемы с нажатием на контент, когда ярлык формы растет по высоте. Метка формы не нажимает оранжевую коробку вниз, когда она растет в длину, которая находится на небольшой ширине страницы. Мой код здесь:Метка реагирующей формы не выводит контент вниз

<html> 
 
<head> 
 
\t <style type="text/css"> 
 
\t \t #form{ 
 
\t \t \t z-index: 2; 
 
\t \t \t position:relative; 
 
\t \t \t width: 35.42%; 
 
\t \t \t margin-left: 32.71%; 
 
\t \t } 
 

 
\t \t .column { 
 
\t \t \t display: inline; 
 
\t \t \t float: left; 
 
\t \t \t clear: both; 
 
\t \t } 
 

 
\t \t #formDiv{ 
 
\t \t \t z-index: 3; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t width: 100.59%; 
 
    \t \t left: 0.3%; 
 
\t \t } 
 

 
\t \t #label { 
 
    \t \t z-index: 4; 
 
    \t \t min-height: 28px; 
 
    \t \t line-height: 14px; 
 
    \t \t \t text-align: left; 
 
    \t \t font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t width: 30%; 
 
\t \t } 
 

 
\t \t .leftinline{ 
 
    \t \t display: inline; 
 
    \t \t float: left; 
 
\t \t } 
 

 
\t \t #input { 
 
    \t \t z-index: 8; 
 
    \t \t min-height: 26px; 
 
    \t \t background-color: orange; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t margin-top: 27px; 
 
    \t \t width: 50%; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body style="word-wrap:break-word;margin-top:30px;width:100%"> 
 
\t <form class = "column" id="form" action="/action_page.php"> 
 
\t \t <div id="formDiv"> 
 
\t \t \t <label class="leftinline" id="label"> 
 
\t \t \t \t <span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span> 
 
\t \t \t </label> 
 
\t \t \t <span class="leftinline" id="input"></span> 
 
\t \t </div> 
 
\t </form> 
 
</body> 
 
</html>

Может кто-нибудь помочь мне в этом? Благодаря

ответ

2

С label и span всплывают они складывают бок о бок, пока есть достаточно места, так, чтобы заставить разрыв строки, снимите поплавок, добавив clear: left; в свой .leftinline правило

<html> 
 
<head> 
 
\t <style type="text/css"> 
 
\t \t #form{ 
 
\t \t \t z-index: 2; 
 
\t \t \t position:relative; 
 
\t \t \t width: 35.42%; 
 
\t \t \t margin-left: 32.71%; 
 
\t \t } 
 

 
\t \t .column { 
 
\t \t \t display: inline; 
 
\t \t \t float: left; 
 
\t \t \t clear: both; 
 
\t \t } 
 

 
\t \t #formDiv{ 
 
\t \t \t z-index: 3; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t width: 100.59%; 
 
    \t \t left: 0.3%; 
 
\t \t } 
 

 
\t \t #label { 
 
    \t \t z-index: 4; 
 
    \t \t min-height: 28px; 
 
    \t \t line-height: 14px; 
 
    \t \t \t text-align: left; 
 
    \t \t font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t width: 30%; 
 
\t \t } 
 

 
\t \t .leftinline{ 
 
    \t \t display: inline; 
 
    \t \t float: left; 
 
     clear: left; 
 
\t \t } 
 

 
\t \t #input { 
 
    \t \t z-index: 8; 
 
    \t \t min-height: 26px; 
 
    \t \t background-color: orange; 
 
    \t \t position: relative; 
 
    \t \t margin-right: -10000px; 
 
    \t \t margin-top: 27px; 
 
    \t \t width: 50%; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body style="word-wrap:break-word;margin-top:30px;width:100%"> 
 
\t <form class = "column" id="form" action="/action_page.php"> 
 
\t \t <div id="formDiv"> 
 
\t \t \t <label class="leftinline" id="label"> 
 
\t \t \t \t <span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span> 
 
\t \t \t </label> 
 
\t \t \t <span class="leftinline" id="input"></span> 
 
\t \t </div> 
 
\t </form> 
 
</body> 
 
</html>

+0

Спасибо, все работает! Небольшое объяснение, почему я должен добавить его, поможет. Еще раз спасибо! – raju

+0

Еще раз спасибо! Но, похоже, это добавляет пространство между текстовым полем и оранжевым полем. – raju

+1

@raju Это пространство вызвано 'margin-top: 27px;' в вашем правиле '# input' – LGSon