統一CSS - 在選擇框的右側添加圖標

我在窗體上使用了當前的uniformjs庫和引導程序。與該庫的選擇框得到一個不錯的設計：統一CSS - 在選擇框的右側添加圖標

<div class="control-group"> 
<label class="control-label">Some Label:</label><div class="controls"> 
    <select class="uni_style"> 
     <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option> 
     <option>Lorem ipsum dolor sit amet</option> 
     <option>Lorem ipsum dolor sit amet</option> 
     <option>Lorem ipsum dolor sit amet</option> 
     <option>Lorem ipsum dolor sit amet</option> 
    </select> 
    <img src="../img/bullet_red.png"/> 
</div>

目前我的問題是，bullet_red將在一個新行被渲染，但我想對同一行的子彈。

經過幾次嘗試後，我需要一些幫助。我想：像

改變div.uni-選擇

的風格改變div.uni，選擇跨度

的風格上

顯示內嵌有沒有人用解決問題的辦法？

來源

2013-02-12 karlis

您就可以在一個jsfiddle.net確切的問題？ – 2013-02-12 08:45:42

對不起，並不那麼容易，我會嘗試發佈一個demopage – karlis 2013-02-12 09:44:11

您可以至少發佈輸出的屏幕截圖。 – 2013-02-12 10:24:54

從得到的溶液另一個來源：

我需要這種風格：

div.reqselect {display:inline-block; vertical-align:middle; margin-bottom: 0;}

，然後我需要的類加上原有的類添加到統一初始化

$(".uni_style").uniform({ 
selectClass: 'uni-selector reqselect',});

來源

2013-02-13 08:17:01 karlis

可以包裹選擇和img元素在一個div且在此實例浮動兩個元件向左等：

<div class="control-group"> 
<label class="control-label">Some Label:</label><div class="controls"> 
    <div> 
     <select style='float:left;' class="uni_style"> 
      <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option> 
      <option>Lorem ipsum dolor sit amet</option> 
      <option>Lorem ipsum dolor sit amet</option> 
      <option>Lorem ipsum dolor sit amet</option> 
      <option>Lorem ipsum dolor sit amet</option> 
     </select> 
     <img style='float:left;'src="../img/bullet_red.png"/> 
    </div> 
</div>

http://jsfiddle.net/mpHug/2/

來源

2013-02-12 10:27:11 mahulst

嗨邁克，感謝您的建議，但它不工作;正如我寫的：我使用統一的js，而且我認爲select中的樣式不會被使用。統一將自己的樣式和額外跨度添加到輸出 – karlis 2013-02-12 12:36:19

統一CSS - 在選擇框的右側添加圖標

回答

相關問題