如何重新放置HTML元素以防止与浏览器边缘发生冲突? [英] How do I reposition an HTML element to prevent a collision with browser's edge?

问题描述

我有一个基于CSS的下拉菜单，该菜单使用嵌套的UL元素.效果很好.

我的问题是，如果浏览器朝向页面的最小宽度，则最右边的菜单将与浏览器的边缘碰撞"，并在可见窗口之外部分呈现.当显示UL时，我想看看是否有足够的空间，如果没有，请将其向左移动足够远，以便可以完全呈现​​它.

相关的CSS是:

I have a CSS based drop-down menu, which uses nested UL elements. It works great.

My issue is that if the browser is towards the minimum width of the page, the right-most menu will "collide" with the browser''s edge and get rendered partially outside the visible window. When the UL gets displayed, I would like to see if there is enough room and, if not, shift it far enough to the left so that it can be rendered completely.

The relevant CSS is:

#menu-table td > ul > li > ul { /* Drop-down */
    position:absolute;
    z-index:500;
    display:none;
    margin-left:-1px;
}

#menu-table td > ul > li:hover > ul { /* When top level item is hovered */
    display:block;
}

我想我可以拦截LI元素的onMouseEnter事件，假设它在应用:hover样式之前得到处理.但是我不确定如何计算UL的位置或其相对于窗口右边缘的相对位置.

如果有什么不同，我正在使用CSS2和XHTML 1.1.我知道可以做到这一点，因为我已经看到了.有任何建议吗?

I am thinking that I could intercept the LI element''s onMouseEnter event, assuming that it gets processed before the :hover style gets applied. But I am not sure how to calculate the position of the UL or its relative position to the window''s right edge.

If it makes any difference, I am using CSS2 and XHTML 1.1. I know this can be done as I''ve seen it. Any suggestions?

推荐答案

如果我正确理解了您的问题，建议您仔细阅读以下内容:


myElement.offsetWidth(用于确定元素的像素宽度)
myElement.offsetLeft(用于确定元素的左边缘，以像素为单位)

然后简单地将两者相加，检查总和是否小于可用的屏幕空间(还要考虑是否已将水平滚动应用于文档).如果不小的值，则以您认为适当的程度偏移元素位置.

希望这会有所帮助，

//L

Hi,

if I understand your question correctly, I would suggest you look int the following:


myElement.offsetWidth (for determining the width in pixels of your element)
myElement.offsetLeft (for determining the left edge in pixels of your element)

then simply add those two, check if the sum is smaller than the available screen realestate (also, take into account if horisontal scroll has been applied to the document). If it is not smaller, offset your elements position by however much you deem appropriate.

Hope this helps,

//L

这篇关于如何重新放置HTML元素以防止与浏览器边缘发生冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！