Question

我有一个范围和一个选择，在下面的代码中，范围显示在选择上方，而我想首先显示范围，而选择应该显示在它旁边。

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

打击是CSS

<style>
.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;
}
</style>

如何显示span旁边的选择。

Answer 1

将以下CSS添加到样式表中：

div.span12 {
    display:flex;
}

您可以在此处看到一个示例：https://jsfiddle.net/sebastianbrosch/3goojaxc/

您想在选择后显示星号吗？将其移到select元素后面。

Answer 2

目前，select的宽度为：100％和display: block。块级元素扩展了各行的整个宽度。

缩小选择的宽度并将显示设置为inline或inline-block

＆＃13;

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

＆＃13;

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

＆＃13;

在选择旁边显示跨度

2 个答案: