Question

我在div中有两个输入

这是代码

＆＃13;

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

＆＃13;

但他们因为div而向左移动

我需要他们像这样

＆＃13;

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

＆＃13;

但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）对于不同的两个元素使用相同的名称ID，这是错误的。ID名称必须是唯一的，我将lname更改为类名。

＆＃13;

.wrapper {
	width:100%;
	height:500px;
	border-style:solid;
	border-color:#1d69b4;
	margin-top:25px;
}

.container {
	float:left;
	width:70%;
	height:100%;
}

.frm {
	width:100%;
	height:30%
}

.lname {
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
        border-radius:50px;
}

@media screen and (max-width: 653px) {
	.lname {
		width: 150px;
	}
}

@media screen and (max-width: 477px) {
	.lname {
		width: 50px;
	}
}

＆＃13;

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

＆＃13;

左边的输入取决于div

2 个答案: