html - 在 <select> 旁边显示 <span>

Question

我有一个<span>和一个 <select> 。在下面的代码中<span>出现在 <select> 上方而我想显示<span>首先是<select>应该出现在它旁边。

.requiredStar {
  color: #FF0000;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div class="row-fluid">
  <div class="span12"> 
    <span class="requiredStar">*</span>
    <select class="input-block-level">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

如何显示 <select>旁边<span> ？

Answer 1

您可以使用以下解决方案，添加 display:flex;关于.span12容器:

.requiredStar {
  color: #FF0000;
  padding-right:10px;
  padding-top:5px;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/** added this CSS code */
div.span12 {
  display:flex;
}

<div class="row-fluid">
  <div class="span12"> 
    <span class="requiredStar">*</span>
    <select class="input-block-level">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

您想在 <select> 之后显示星号吗？ ？将其移到<select>后面元素。您还可以使用padding-top和padding-right控制星号的位置。