在選擇旁邊顯示span

我有一個span和select，在下面的代碼中span顯示在select上方，而我想先顯示span，select應該顯示在它旁邊。在選擇旁邊顯示span

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

我該怎麼讓選擇跨越未來。

來源

2015-10-09 user804401

添加以下CSS的樣式表：

div.span12 { 
    display:flex; 
}

一個例子，你可以在這裏看到：https://jsfiddle.net/sebastianbrosch/3goojaxc/

你想展示後，選擇星號？將它移動到select元素的後面。

來源

2015-10-09 07:10:56

有反正無需修改自舉span12做，可能是通過修改requiredStar類的顯示設置爲。此星號出現在每個輸入元素旁邊 – user804401

用一個新的div包裝星號和'input'或'select'。看到這裏的例子：https://jsfiddle.net/sebastianbrosch/3goojaxc/1/ –

有沒有什麼辦法可以添加一些間距，並帶下面的星星。 – user804401

目前選擇有寬度：100％和display: block。塊級元素擴展其各行的整個寬度。

減少選擇的寬度和inline或inline-block

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

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

來源

2015-10-09 07:11:43

在選擇旁邊顯示span

回答

相關問題