如何使用 div 模拟

发布于 2024-10-17 07:40:18 字数 1770 浏览 2 评论 0原文

我正在尝试为选择的标签提供边框，并且在过去的两个小时里一直在抓狂。

我在通过绝对和相对使用位置之前已经完成了它，但是我的硬盘崩溃了并且我的所有代码都丢失了。

简而言之，我有

<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:

原文

I'm attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.

I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.

Put simply I have

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

This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content

How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?

If you need more code, please say so.

Any and all help is appreciated. :)

EDIT

Here's some more code...

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=''>     </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; 
}

This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.

Help? D:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尘世孤行 2024-10-24 07:40:18

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

回复收藏 0 原文

任谁 2024-10-24 07:40:18

我已经找到了一个涉及浮动和“clear：both”的解决方案，它似乎可以跨浏览器工作。

<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 的帮助。 :)

I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.

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

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

Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)

回复收藏 0 原文

~没有更多了~