javascript - 左侧的输入取决于 div

Question

我在 div 中有两个输入

这是代码

<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>