[英]Move two input boxes side by side
目前,他们只是互相摔倒
我尝试使用此代码,但所做的只是使盒子变短了http://jsfiddle.net/aY9HC/
这是我的代码
<style>
.fieldBlock
{
display: block;
width: 200px;
float: left;
}
</style>
这是文本框代码
<div id="main-wrapper">
<div class="unix-login">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="login-content card">
<center><h3>Register Account</h3>
<p><strong>Create Account</strong> » Purchase » Begin</p></center>
<div class="login-form">
<form data-toggle="validator" method="post" id="register_form">
<div class="form-group">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
</div>
<div class="form-group">
<div class="fieldBlock">
<label>Age</label>
<input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>
</div>
<div class="form-group">
<label>Email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Password</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>
<div class="help-block"></div>
</div>
<div class="form-group">
<label>Choose Your Course</label>
<select name="course" class="form-control">
<option value="0" selected>Texas Parent Taught Drivers Ed</option>
<option value="1">Texas Instructor Taught Drivers Ed</option>
<option value="2">Texas Adult Drivers Ed</option>
</select>
</div>
<div class="form-group">
<label>Referral</label>
<input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">
</div>
<div class="form-group checkbox">
<label>
<input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy
</label>
<div class="help-block with-errors"></div>
</div>
<button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>
<div class="register-link m-t-15 text-center">
<p>Already have account? <a href="page-login.php"> Sign in</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
它所做的就是将盒子彼此放在一起并使它们变小一些。 我现在有点卡住了。 帮助将不胜枚举。 谢谢!
尝试添加
display:inline-block
在两个文本框中。
另外,您也可以尝试
display: flex;
尝试使用引导网格(行和列)来组织输入字段。 模式示例:
<form data-toggle="validator" method="post" id="register_form">
<div class="row mx-0">
<div class="form-group col-6">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name"
class="form-control"
placeholder="First & Last Name" required>
</div>
</div>
<div class="form-group col-6">
<div class="fieldBlock6">
<label>Age</label>
<input type="dob" id="age"
name="age"class="form-control"
placeholder="03/26/2001" required>
</div>
</div>
</div>
<div class="row mx-0">
<div class="form-group col-12">
<label>Email address</label>
<input id="email" type="email" name="email"
class="form-control" placeholder="Email"
data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
</div>
</form
使用float使元素彼此相邻,您走在正确的轨道上。 但是,当元素在狭窄的空间中彼此相邻漂浮时,它们将默认堆叠。 通过放大或缩小父容器,您可以了解其工作原理。
另外,还有几个缺少的fieldBlocks,因此样式不再被应用。
我不想花太多时间,但是我认为将您提供的代码中的一个工作示例放在一起很有趣。 可能还有更多可以清除的东西,但希望它能提供一些见识。
http://jsfiddle.net/aY9HC/1373/
的CSS
/* make a nice form wrapper */
#main-wrapper{
width:100%;
padding:1em;
}
#main-wrapper h3,
#main-wrapper p,
#main-wrapper button{
text-align:center;
margin-bottom:10px;
clear:left;
}
#main-wrapper button{
display:block;
position:relative;
left:45%;
}
/* Define our basic fieldBlock style / stagger rows */
.fieldBlock
{
width: 50%;
float: left;
margin-bottom:15px;
}
.fieldBlock input,
.fieldBlock select{
height:30px;
}
.fieldBlock input[type='checkbox']{
height:10px;
}
.fieldBlock:nth-of-type(3n){
width:100%;
}
.fieldBlock:nth-of-type(3n) input{
width:40%;
}
/* Define look for our labels */
.fieldBlock label{
font-weight:bold;
display:block;
margin-bottom:5px;
}
.fieldBlock .nonblock{
display:inline-block;
}
的HTML
<div id="main-wrapper">
<h3>Register Account</h3>
<p><strong>Create Account</strong> » Purchase » Begin</p>
<form data-toggle="validator" method="post" id="register_form">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
<div class="fieldBlock">
<label>Age</label>
<input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required>
</div>
<div class="fieldBlock">
<label>Email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="fieldBlock">
<label>Password</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>
<div class="help-block"></div>
</div>
<div class="fieldBlock">
<label>Choose Your Course</label>
<select name="course" class="form-control">
<option value="0" selected>Texas Parent Taught Drivers Ed</option>
<option value="1">Texas Instructor Taught Drivers Ed</option>
<option value="2">Texas Adult Drivers Ed</option>
</select>
</div>
<div class="fieldBlock">
<label>Referral</label>
<input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">
</div>
<div class="fieldBlock checkbox">
<input id="policy" type="checkbox" data-error="Don't you agree?" required />
<label for="policy" class="nonblock">Agree the terms and Privacy Policy</label>
<div class="help-block with-errors"></div>
</div>
<button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>
<p>Already have account? <a href="page-login.php"> Sign in</a></p>
</form>
</div>
您可以只使用col
类
<div class='row'>
<div class='col'>Your first text box</div>
<div class='col'>Your second text box</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.