css 位置 jquery ui 组合框

Question

我想定位 jQuery UI 组合框。我有不止一个，但不是所有的都必须在相同的相对位置。

这是我的代码:

html:

<div>
   <select id="comboSubsidiary" class="comboTravel" >
      <option>loading</option>
   </select>
</div>

<div>
   <select id="comboCountry" class="comboWork">
      <option>loading</option>
   </select>
</div>

CSS:

div.comboTravel{position: relative; left: 410px; top: -23px; display: inline-block; }

上面的 css 不工作。

以下 css 有效:

.ui-combobox{position: relative; left: 110px; top: -23px; display: inline-block; }
        .ui-button {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* adjust styles for IE 6/7 */
            *height: 1.7em;
            *top: 0.1em;
        }
        .ui-autocomplete-input {
            margin: 0;
            padding: 0.3em;
        }

但是有了这个 css，所有的组合框都以相同的方式定位。我想要一些组合框使用 css 类，但我不知道如何访问它们(例如 css-class comboTravel 或 comboWork)

我怎样才能让它工作？

Answer 1

我可以看到 div.comboTravel 类的顶部为 -23px，可能是这使得组合框没有出现在屏幕上。我尝试删除它并为 comboWork 创建另一个类，它对我有用。这是像 [http://jsfiddle.net/nAC8N/2/]

这样的 jsFiddle

希望这对您有所帮助。