我目前有一个纯CSS下拉/大型菜单，它可以正常工作。布局是可变的（基于百分比），并且我也在使用媒体查询。
我遇到的问题是，我需要检测菜单项li是否靠近浏览器边缘，并使用CSS更改align属性。
我猜想我将需要使用jQuery来实现这一目标，但真的不知道如何做到。
最佳答案
看看这个。它可能并不优雅，但如果li靠近左侧或顶部，它将变成粉红色。您应该能够完成难题：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
ul{
list-style:none;
}
li{
display:inline-block;
margin: 5px;
width: 100px;
height: 100px;
background-color:silver;
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var items = new Array();
var i;
function paintPink(){
$('ul > li').css('background-color','silver');
for (i=1;i<=$('ul').children().length;i++){
if ((($('ul > li:nth-child(' + i + ')').offset().left) < 60) || (($('ul > li:nth-child(' + i + ')').offset().top) < 60)){
$('ul > li:nth-child(' + i + ')').css('background-color','fuchsia');
};
};
};
$(window).load(paintPink);
$(window).resize(paintPink);
});
</script>
</body>
</html>
祝好运。
关于jquery - 检测CSS下拉菜单是否靠近浏览器边缘并更改对齐方式-流体宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7256166/