輸入左取決於格

這裏是代碼

<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 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需要浮到左，我可怎麼辦呢？

來源

2017-06-04 Logan

我看不出區別。什麼是？ –

在第一個變體中，所有div浮動到左側。在第二不是@ MoshFeu – Logan

元素左對齊，但包含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>

來源

2017-06-04 10:47:43 Shtut

但它需要是70％ – Logan

而不是。我粘貼你的代碼，他們仍然在左邊 – Logan

@Logan嗨，我明白你的意思了，我已經更新了答案 - 嘗試添加'white-space：nowrap'到父div風格 – Shtut

1）你說的容器必須達到70％，因此，可以使用Media Queries和變動幅度的文本框中。

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>

來源

2017-06-04 11:17:19 Ehsan

輸入左取決於格

回答

相關問題