入力は、私はdivの中に2つの入力を持つdivの

Question

に依存

ここ

はコード

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;"> 
 
    <div style="float:left; width:70%;height:100%;"> 
 
     <div style="width:100%;height:30%;"> 
 
       <form> 
 
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
        <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
       </form> 
 
     </div> 
 
    </div> 
 
</div>

あるしかし、彼らは私がそれらを必要

ためのdivの左に浮いこのようにするには

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;"> 
 
    
 
     <div style="width:100%;height:30%;"> 
 
       <form> 
 
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
        <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
       </form> 
 
     </div> 
 
    </div>

しかし、divの必要性が左に浮動するために、私はこれをどのように行うことができますか？

Answer 1

要素は左に揃えられますが、含まれるdivは横に並べて保持するのに十分な幅がありません。

100％div内に2つの50％divがあるとします。追加された空白のためにオーバーフローします。

'white-space：nowrap;'を追加してみてください。親のdivに：

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px; white-space: nowrap;"> 
 
    <div style="float:left; width:70%;height:100%;"> 
 
     <div style="width:100%;height:30%;"> 
 
       <form> 
 
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
        <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/> 
 
       </form> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

1）あなたは、コンテナが70％でなければならないので、Media Queriesと変化幅のテキストボックスを使用することができると言います。

2）異なる2つの要素に同じ名前のIDを使用していますが、これは間違っています。 ID名前は一意である必要があります。lnameをクラス名に変更します。

.wrapper { 
 
\t width:100%; 
 
\t height:500px; 
 
\t border-style:solid; 
 
\t border-color:#1d69b4; 
 
\t margin-top:25px; 
 
} 
 

 
.container { 
 
\t float:left; 
 
\t width:70%; 
 
\t height:100%; 
 
} 
 

 
.frm { 
 
\t width:100%; 
 
\t height:30% 
 
} 
 

 
.lname { 
 
\t padding: 12px 20px; 
 
\t margin: 8px 0; 
 
\t box-sizing: border-box; 
 
     border-radius:50px; 
 
} 
 

 
@media screen and (max-width: 653px) { 
 
\t .lname { 
 
\t \t width: 150px; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 477px) { 
 
\t .lname { 
 
\t \t width: 50px; 
 
\t } 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
     <div class="frm"> 
 
       <form> 
 
        <input type="text" class="form-control lname" name="lname" placeholder="Last Name"> 
 
        <input type="text" class="form-control lname" name="lname" placeholder="From"> 
 
       </form> 
 
     </div> 
 
    </div> 
 
</div>