2017-02-19 19 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

由於labelspan是浮動的,只要有足夠的空間,他們將堆疊並排側,所以要強制換行,加入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該空間是由'#input'規則中的'margin-top:27px'造成的 – LGSon