如何在<label>和表单域之间添加空格

Question

我知道这已被回答，但没有一个解决方案似乎适用于我。我试图将一个标签和2个小表单域合并到一行中。标签标签和字段之间有大约90px的空间。像下面的图像。

我有一个问题让“星期一”的标签，在同样喜欢的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>

Answer 1

是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; 
}