發生CSS問題：無法在選擇框中放置文本

Question

爲什麼單詞「用戶」出現在選擇框下方？我希望它位於選擇框的右側。我錯過了什麼？

http://jsfiddle.net/njh85/6/

Answer 1

你可以這樣做：

HTML：

<div class="ui-widget"> 
      <select id="users" name="userName"> 
      <option value="#"> 
       Select one... 
      </option> 
      <option value='1'> 
       User1 
      </option> 
      <option value='2'> 
       User2 
      </option> 
      <option value='3'> 
       User3 
      </option> 
      <option value='4'> 
       Demo 
      </option> 
      </select> 
</div> 
<div id="user">Here is a sample sentence :)</div> 

CSS：

/*Users Combobox*/ 
.ui-combobox { 
    position: relative; 
    display: inline-block; 
    margin-right: 36px; 
} 
.ui-combobox-toggle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin-left: -1px; 
    padding: 0; 
    /* adjust styles for IE 6/7 */ 
    *height: 1.7em; 
    *top: 0.1em; 
} 
.ui-combobox-input { 
    margin: 0; 
    padding: 0.3em; 
} 
#user { 
position: relative; 
top: -27px; 
left: 270px; 
} 

FIDDLE：

http://jsfiddle.net/FlameTrap/njh85/10/

所有你需要做的是移動文本左，向上從那裏通常是可以通過使用：position: relative。此外，該文本在<div>之外。

Answer 2

<div class="ui-widget"> 
      <select id="users" name="userName"> 
      <option value="#"> 
       Select one... 
      </option> 
      <option value='1'> 
       User1 
      </option> 
      <option value='2'> 
       User2 
      </option> 
      <option value='3'> 
       User3 
      </option> 
      <option value='4'> 
       Demo 
      </option> 
      </select> 
     <div class="words"> user</div></div> 

使用div標籤內的字 「用戶」

.words{ 
    float:right; 
    color:#808080; 
    font-family:Sans,ubuntu; 
    font-size:18px; 
    margin-right:100px; 

} 

Answer 3

移動的div直接在您的選擇框後，並添加一些右邊距爲您.ui-combobox

http://jsfiddle.net/njh85/9/