单击图标时列表消失

问题的根：单击Web应用程序上的图标时我有一个列表。它工作的很好，但是当它有很多元素时，它会在屏幕上方出现，我看不到它。这是屏幕的上半部分：单击图标时列表消失

我几乎可以肯定的解决方案将是一个微小的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; 
}

来源

2015-08-28 stack man

如果你要设置''div class =“fg-menu-container ui-widget ui-widget-content ui-corner-all”，你应该从'style'属性中移除'top：auto' 'position'属性为'absolute'。没有意义。 –

@OzguzBar你认为这是造成这个问题吗？ –

这个或者'底部：35px;'再次看起来不合理。我会尝试使用'top：0'或删除'bottom：35px' –

难道ü尝试呢？

.fg-menu-container ui-widget ui-widget-content ui-corner-all { width：450px; bottom：35px; top：0; right：auto; left：0px; display：block; 溢出：auto; }

desciption并不真正告诉这是什么问题在这里.. !! 如果你能帮助更多地理解同样的事情，那将会非常有帮助。

来源

2015-08-28 11:43:07 Shivi

我试过你的建议，但它不工作。 “你的意思是不是真的在说这个问题到底是什么...... !!”？我认为这不仅仅是清楚的;当我点击该图标时，该列表将出现在屏幕上方，如图所示，所以我无法看到列表。询问前请仔细阅读说明。 –

尝试从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中。您正在为position属性设置absolute值。那么你正在使用

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

再次混合起来。

如果您尝试在绝对定位的div中显示内容，上面的CSS应该完成工作。你想在什么位置或如何定位它是一个不同的问题，并且与父元素高度相关，你还没有弄清楚。

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

当使用bottom:35px对于这恰好是在另一个相对的div（像您使用的图标面板）div元素，它会根据该板的位置调整本身。你完整的HTML和CSS定义丢失了，但我会去top:0而不是那个。

来源

2015-08-29 10:23:38

单击图标时列表消失

回答

相关问题