Question

尝试将我的输入框以这种形式移动到我的标签旁边，我不确定我做错了什么让输入包装到下一行。有任何想法吗？提供HTML和CSS代码供参考。

/* Field set styles */

fieldset {
  background-color: rgb(255, 246, 205);
  border: 1px solid rgb(233, 69, 0);
  float: left;
  margin: 10px 0px 10px 2.5%;
}

fieldset#custName,
fieldset#experience {
  width: 46%;
}

legend {
  background-color: rgb(233, 69, 0);
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}


/* Label styles */

label {
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%;
}


/* Input control styles */

input {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}

input#state {
  width: 50px;
}


/* Selection list styles */

select {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
}


/* Option button styles */

fieldset.optionGroup {
  border-width: 0px;
}

fieldset.optionGroup label {
  display: inline;
  float: none;
  margin: 0px 3px 0px 0px;
  width: 30px;
}

fieldset.optionGroup input {
  display: inline;
  float: none;
  margin: 0px 20px 0px 0px;
  width: 20px;
}


/* Text area styles */

textarea {
  display: block;
  font-size: 0.9em;
  float: left;
  height: 150px;
  margin: 10px 0px;
  width: 100%;
}

<fieldset id="experience">
  <legend>Share Your Experience at Red Ball Pizza</legend>

  <label for="dateofvisit">Date of visit</label>
  <input name="dateofvisit" id="dateofvisit" />

  <label for="receipt">Receipt number</label>
  <input name="receipt" id="receipt" placeholder="re-nnnnnn" />

  <label for="ordertype">Order Type</input>
          <select name="ordertype" id="ordertype">
              <option value="type1">Carry out</option>
              <option value="type2">Delivery</option>
              <option value="type3" selected="selected">Dine in</option>
              <option value="type4">Take and bake</option>
          </select>
  
          <label>Was your service friendly?</label>
  <fieldset class="optionGroup">
    <label for="sYes">Yes</label>
    <input type="radio" name="serviceFriendly" id="sYes" value="yes" />
    <label for="sNo">No</label>
    <input type="radio" name="serviceFriendly" id="sNo" value="no" />
  </fieldset>

  <label>Was your order correct?</label>
  <fieldset class="optionGroup">
    <label for="oYes">Yes</label>
    <input type="radio" name="orderCorrect" id="oYes" value="yes" />
    <label for="oNo">No</label>
    <input type="radio" name="orderCorrect" id="oNo" value="no" />
  </fieldset>

  <label>Was your food hot?</label>
  <fieldset class="optionGroup">
    <label for="hotYes">Yes</label>
    <input type="radio" name="foodHot" id="hotYes" value="yes" />

    <label for="hotNo">No</label>
    <input type="radio" name="foodHot" id="hotNo" value="no" />
  </fieldset>

  <label for="comments">Tell us more abut your experience!</label>
  <textarea name="comments" id="comments"></textarea>

</fieldset>

Answer 1

您的某个标签的结束标记有DeployerPartitionHandler。变化

</input>

到

<label for="ordertype">Order Type</input>

这创建了一个上下文/容器，其字段集宽度为40％，适用于单个标签。

好奇为什么我的输入元素与我的标签不在同一行

1 个答案: