发生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/