Question

问题＆＃39; S ROOT：点击网络应用程序上的图标时，我找到了一个列表。它工作得很好，但是当它有许多元素时，它就会超过＆＃39;屏幕，我无法看到它。这是屏幕的上半部分：

我几乎可以肯定解决方案将是一个很小的CSS属性，但无法找到哪一个。

以下是清单：

<div class="fg-menu-container ui-widget ui-widget-content ui-corner-all" style="width: 450px; bottom: 35px; top: auto; right: auto; left: 0px; display: block;">

<ul id="documentlist" class="fg-menu ui-corner-all" role="menu" aria-activedescendant="active-menuitem" aria-labelledby="documentListButton">

        AAA<li role="menuitem"><a href="_#" data-cid="c67" class="ui-corner-all" tabindex="-1"><img title="Edit Attachment" alt="Edit Attachment" src="/_dev/images_/Attachment16.png">test</a></li>

        AAA<li role="menuitem"><a href="_#" data-cid="c68" class="ui-corner-all" tabindex="-1"><img title="Edit Attachment" alt="Edit Attachment" src="/_dev/images_/Attachment16.png">test</a></li>

       ...

        AAA<li role="menuitem"><a href="_#" data-cid="c91" class="ui-corner-all" tabindex="-1"><img title="Edit Attachment" alt="Edit Attachment" src="/_dev/images_/Attachment16.png">test</a></li>


        <li role="menuitem">
            <hr class="top-border-item ui-state-default">
            CCCC<a href="_#" id="uploadDocumentLink" class="ui-corner-all" tabindex="-1"><img title="Attach a document" alt="Attach a document" src="/_dev/images_/AddAttachment16.png"> Attach a document</a>
        </li>


</ul></div>

以下是涉及的CSS类：

.fg-menu-container { 
    position: absolute; 
    top:0; 
    left:-999px; 
    padding: .4em;  
    overflow: hidden; 
    z-index: 999
}

.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}

.ui-widget-content { padding: 0.5em; margin-bottom: 0.7em; }

.ui-corner-all {
    border-top-left-radius: 4px;
}

.fg-menu a:active { 
    float:left; 
    width:92%; 
    padding:.3em 3%; 
    text-decoration:none; 
    outline: 0 !important; 
}

Answer 1

你试过这个吗？

.fg-menu-container ui-widget ui-widget-content ui-corner-all { 宽度：450px; 底部：35px; 顶部：0; 对：汽车; 左：0px; 显示：块; 溢出：自动; }

这个问题并没有真正说明这里究竟是什么问题.. !! 如果你能帮助更多地了解同样的事情，那将会有很大的帮助。

Answer 2

尝试从div元素中删除style属性并使用它：

<div class="fg-menu-container ui-widget ui-widget-content ui-corner-all"></div>

然后你可以像这样自定义类

.fg-menu-container { 
    position: absolute; 
    top:0;
    padding: .4em;  
    overflow: auto; 
    z-index: 999;
    width:450px;
    height:100px;
}

虽然我不知道您使用left:-999px;的原因，但如果您在正确显示div时没有任何问题，可以在css定义中包含它。将div设置为固定高度并将overflow属性设置为auto可能是一个好主意。

在CSS中有很多东西混在一起。您为absolute属性设置了position值。然后你正在使用

top: 0;
top: auto;
bottom: 35px;

再次全部搞砸了。

如果您尝试在绝对定位的div中显示内容，则上面的css应该完成工作。您希望在何处或如何定位它是一个不同的问题，与父元素高度相关，您尚未澄清。

您可以使用顶部，左下角和右侧的定位属性进行设置那个地点。请记住，这些值将与下一个值相关具有相对（或绝对）定位的父元素。如果没有这样的父，它将默认一直回到元素本身意味着它将相对于页面本身放置。

当您将bottom:35px用于碰巧位于另一个相对div中的div元素时（如您正在使用的图标面板），它将根据该面板的位置进行自我调整。您缺少完整的html和css定义，但我会选择top:0而不是。{/ p>

单击图标时列表消失

2 个答案: