Question

我知道这已得到解答，但解决方案似乎都不适用于我。我想把一个标签和2个小表格字段放到一行。标签标签和字段之间的空间大约为90px。如下图所示。

我在获取标签“星期一”时遇到问题，就像2个字段表单一样，当我设法完成此操作时，2个表单字段中的1个落在下一行。运气不好可能很简单。

目前它看起来像：

请帮忙！

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

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

1 个答案: