如何在
问题描述:
我知道这已被回答,但没有一个解决方案似乎适用于我。我试图将一个标签和2个小表单域合并到一行中。标签标签和字段之间有大约90px的空间。像下面的图像。如何在<label>和表单域之间添加空格
我有一个问题让“星期一”的标签,在同样喜欢的2点的形式,当我做管理做到这一点,1出2个表单字段落到以下行。对于可能很简单的事情来说,运气不好。
目前看起来是这样的:
请帮帮忙!
div.form-group{
width:100%;
float:left;
width: 100%;
margin-left: 450px;
margin-top: -340px;
z-index:-2;
}
div.form-group > label,[type=text]{
float:left;
}
div.form-group > label{
width:100px;
text-align: left;
padding-left: -10px;
margin-right: 40px;
z-index:9;
}
div.form-group[type=text]{
margin-left: 50px;
z-index: 1
}
<div class="form-group">
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<input type="text" name="Monds" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<div>
答
是this你要找的东西?
HTML:
<div id='firstColumn'>
<label for='frName'>Franchise Name</label>
<input type="text" name="frName" id="frName" placeholder="Enter franchise name" required tabindex="1"/>
<br />
<label for='name'>Your Name</label>
<input type="text" name="name" id="name" placeholder="Joe Blogs" required tabindex="2"/>
<br />
<label for='address'>Address</label>
<input type="text" name="addressNo" id="addressNo" placeholder="No" required tabindex="3"/>
<input type="text" name="addressStreet" id="addressStreet" placeholder="Street" required tabindex="4"/>
<input type="text" name="addressTown" id="addressTown" placeholder="Town/City" required tabindex="5"/>
<input type="text" name="addressZIP" id="addressZIP" placeholder="ZIP Code" required tabindex="6"/>
<br />
<label for='phone'>Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" required tabindex="7"/>
<br />
<input type='submit' />
</div>
<div id='secondColumn'>
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" value='00:00' required tabindex="8">
<span>-</span>
<input type="text" name="Monds" id="Monday" class="open_hours" value='00:00' required tabindex="9">
<hr />
</div>
<div>
<label for="Tues"> Tuesday </label>
<input type="text" name="Tues" id="Tue" class="open_hours" value='00:00' required tabindex="10">
<span>-</span>
<input type="text" name="Tues" id="Tuesday" class="open_hours" value='00:00' required tabindex="11">
<hr />
</div>
<div>
<label for="Weds"> Wednesday </label>
<input type="text" name="Weds" id="Wed" class="open_hours" value='00:00' required tabindex="12">
<span>-</span>
<input type="text" name="Weds" id="Wednesday" class="open_hours" value='00:00' required tabindex="13">
<hr />
</div>
<div>
<label for="Thus"> Thursday </label>
<input type="text" name="Thus" id="Thu" class="open_hours" value='00:00' required tabindex="14">
<span>-</span>
<input type="text" name="Thus" id="Thursday" class="open_hours" value='00:00' required tabindex="15">
<hr />
</div>
<div>
<label for="Fris"> Friday </label>
<input type="text" name="Fris" id="Fri" class="open_hours" value='00:00' required tabindex="16">
<span>-</span>
<input type="text" name="Fris" id="Friday" class="open_hours" value='00:00' required tabindex="17">
<hr />
</div>
<div>
<label for="Sats"> Saturday </label>
<input type="text" name="Sats" id="Sat" class="open_hours" value='00:00' required tabindex="18">
<span>-</span>
<input type="text" name="Sats" id="Saturday" class="open_hours" value='00:00' required tabindex="19">
<hr />
</div>
<div>
<label for="Suns"> Sunday </label>
<input type="text" name="Suns" id="Sun" class="open_hours" value='00:00' required tabindex="20">
<span>-</span>
<input type="text" name="Suns" id="Sunday" class="open_hours" value='00:00' required tabindex="21">
<hr />
</div>
</div>
CSS:
#firstColumn label,
#secondColumn p {
color: red;
}
#firstColumn {
width: 50%;
float:left;
}
#firstColumn label, #firstColumn input {
width: 90%;
display:block;
}
#addressNo + input,
#addressNo + input + input,
#addressNo + input + input + input {
margin-top: 5px;
}
#secondColumn {
float:left;
width: 50%;
}
#secondColumn div {
display:block;
width: 50%;
}
#secondColumn label {
width: 90px;
margin-top: 15px;
}
#secondColumn label:first-of-type {
margin-top: 0px;
}
#secondColumn input {
width : 15%;
text-align: center;
float: right;
}
#secondColumn span {
float: right;
}
+0
谢谢。这正是我想要的,但不能在我的编辑器中工作,我会修改,直到它。再一次感谢你 – jerneva
您使用的引导? –
不,我试图远离插件 – jerneva
只是我还是在运行你的代码片段而只是返回空白? –