Question

我正在尝试为选择标签提供边框，并且在过去的2小时内一直在拔头发。

我在使用绝对和亲戚的位置之前完成了它，但我的硬盘崩溃了，我的所有代码都丢失了。

简单地说我有

<div style="position:relative; border:1px solid #cc0000;">
    <select style="position:absolute;">
        <option>1</option>
    </select>
</div>

这似乎不起作用... div自动扩展到父div的宽度而不是其内容的宽度

如何将div设置为自动适合选择框的内容并且边框为1px而不会被推出框架？

如果您需要更多代码，请说明。

感谢任何和所有帮助。：）

修改

这里有更多代码......

HTML：

<div class="orderQuantity">
    <label for="quantity" class="orderInputLabel">Quantity:</label>
    <div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
        <select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
            <option value=''>&#160;&#160;&#160;&#160;&#160;</option>
            <option value='10'>10</option>
            <option value='20'>20</option>
            <option value='30'>30</option>
            <option value='40'>40</option>
            <option value='50'>50</option>
            <option value='60'>60</option>
            <option value='70'>70</option>
            <option value='80'>80</option>
            <option value='90'>90</option>
            <option value='100'>100</option>
        </select>
    </div> <!-- end of div that needs border -->
</div>

CSS：

.orderQuantity {
    margin-top: 12px; 
}

这就是我现在所拥有的一切。我尝试过很多东西，但都没有。包括选择绝对和父div相对，反之亦然。

帮助？ d：

Answer 1

你可以使用jQuery。跨浏览器兼容。查看工作示例http://jsfiddle.net/Npv8P/2/

Answer 2

我已经找到了一个涉及花车的解决方案，并且＆＃34;明确：两者都是＆＃34;这似乎跨浏览器工作。

<div style="float:left;"> <!-- just toggle border on this div using jquery -->
    <select>
       <option>1</option>
    </select>
</div>

<div style="clear:both;"></div>

似乎工作正常。感谢Mahima重申了我的努力以及Hussein的帮助。：）

如何使用div模拟<select>？</select>的边框

2 个答案: