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>は、誰もがこれで私を助けることができますか？ labelとspanが、彼らはそう改行を強制するために、限り、十分なスペースがあるように、サイド・バイ・サイドをスタックします浮かべているので感謝
ありがとう、それは動作します！それを追加する理由についての小さな説明が役立ちます。再度、感謝します！ – raju
もう一度ありがとう！しかし、これは、テキストボックスとオレンジ色のボックスの間にスペースを追加するようです。 – raju
@rajuそのスペースは '＃input'ルールの' margin-top：27px; 'によって引き起こされます – LGSon