width：auto属性不受位置：relative的影响

Question

我目前正在尝试设置下拉菜单的样式，但我遇到了一些问题。最大的一点是，当下拉列表的css设置为相对时，下拉元素似乎不会超过其父对象的大小。

（不得不阻止搜索结果，抱歉）。

它似乎适用于固定版，但只有在Firefox中，Chrome的下拉列表才会全部关闭。

所以我认为我需要两种解决方案之一：

1. 修正宽度问题并保持位置：relative
2. 修复仅在chrome中发生的偏移问题，并设置position：fixed属性。

HTML：

<div id="node">
        <div id="nodebar">
            <input type="text" id="nodetext" placeholder="Enter a node" name="nodetext" value="">
            <div id="img-container">
                <img src="styles/magnifyingglass.png" id="img" alt="" />
            </div>
        </div>
        <div id="nodebr"></div>
        <div id="noderesults">
            <div id="nodetruncated"><span class="truncated">Truncated search results..</span></div>
        </div>
    </div>

CSS

#searchresults, #noderesults, #roadmapresults, #intersectnoderesults {
    max-width: 1000px;
    background: #2E3C3F;
    width:auto;
    height: 0px;
    padding: 0;
    border: none;
    position: relative;
    z-index: 3; /*So that the dropdown stays infront of the forms*/
}

有人知道如何解决这个问题吗？

Answer 1

我最后只是通过将CSS分解为每个字段的一个类别来修复此问题，将position属性设置为fixed，并缩放css“top”属性，以便结果适合每个搜索字段。