输入左取决于格

这里是代码

<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

输入左取决于格

回答

相关问题