文章/答案/技术大牛

发布

社区首页 >问答首页 >基于父元素宽度的.Centering绝对定位div (Jquery)

问基于父元素宽度的.Centering绝对定位div (Jquery)
EN

Stack Overflow用户

提问于 2011-03-18 09:15:29

回答 2查看 1.1K关注 0票数 1

我正在构建一个导航栏，在活动选项卡上有一个小箭头(见附件图片)

所需的外观

当前外观

导航栏是基于我的wordpress页面动态创建的。我遇到的问题是活动选项卡上的小箭头居中。

目前，我正在使用jquery将span标记放在当前/活动链接之后。

$('li.current-menu-item a').after('<span></span>');

我的css如下：

#menu-nav{float:right; clear:right; margin-top:30px;font-family:'Arvo'}
#menu-nav li{margin: 0 10px; float:left;  }
#menu-nav a{color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
#menu-nav li.current-menu-item{position:relative;}
#menu-nav li.current-menu-item a{background: #41618c; color:#f4f4f3;}
#menu-nav span{ width:20px; height:11px; float:left;clear:left; background:url(images/active.png) no-repeat; position:absolute; top:27px; left:0; }

我再次遇到的问题是，让箭头在每个选项卡上居中。目前，跨度的位置为left:0。通常，我会给它一个50%的值，并设置一个负边距--父项宽度的一半；然而，父项的宽度一直在变化(因为每个选项卡都有不同的文本。因此，我需要一个jquery解决方案，它将根据箭头的父项宽度将箭头居中。我希望这是有意义的！

jquery

css

css-position

centering

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-03-18 09:31:10

您不需要为此进行定位。请改用display:block和margin:auto：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title>Centering absolutely positioned div based on parent's width (Jquery)</title>
    <style type="text/css">
        #menu-nav {list-style:none;}
        #menu-nav {float:right; clear:right; margin-top:30px;font-family:'Arvo'}
        #menu-nav li {list-style:none;margin: 0 10px; float:left;}
        #menu-nav a {color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
        #menu-nav li.current-menu-item a {background: #41618c; color:#f4f4f3;}
        #menu-nav li.current-menu-item span {display:block;width:20px; height:11px;margin:auto;background:url(images/active.png) no-repeat;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('li.current-menu-item a').after('<span></span>');
        });
    </script>
</head>
<body>
    <ul id="menu-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Artistse</a></li>
        <li><a href="#">About</a></li>
        <li class="current-menu-item"><a href="#">News</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

郑重声明，我认为您采取的是完全错误的方法，应该抛弃JavaScript，改为更改<li>元素的背景图像，使用padding-bottom为其腾出空间：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title>Centering absolutely positioned div based on parent's width (Jquery)</title>
    <style type="text/css">
        #menu-nav {list-style:none;}
        #menu-nav {float:right; clear:right; margin-top:30px;font-family:'Arvo'}
        #menu-nav li {list-style:none;margin: 0 10px; float:left;}
        #menu-nav a {color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
        #menu-nav li.current-menu-item a {background: #41618c; color:#f4f4f3;}
        #menu-nav li.current-menu-item {background:url(images/active.png) no-repeat CENTER BOTTOM;padding-bottom:11px;}
    </style>
</head>
<body>
    <ul id="menu-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Artistse</a></li>
        <li><a href="#">About</a></li>
        <li class="current-menu-item"><a href="#">News</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

票数 2

Stack Overflow用户

发布于 2011-03-18 11:42:04

我同意LeguRi，尝试不使用Javascript，这是另一种使用css的方法，我喜欢在我的链接中总是放一个SPAN标签，你会因为使用CSS得到一个更高的级别。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title>Centering absolutely positioned div based on parent's width (Jquery)</title>
    <style type="text/css">
        #menu-nav {
        margin:30px 0 0 0; padding:5px 0 0 0;
        float:right; clear:right; font-family:'Arvo'
        text-align:right;
        background:#ccc;
        }
            #menu-nav li {
            list-style:none;
            display:inline;
            }
                #menu-nav li a {
                display: inline-block;
                padding-bottom:11px;
                }
                    #menu-nav li a span {
                    display: inline-block;
                    margin: 5px 10px 0px 10px; padding:6px 9px;
                    font-size:17px; color:#9c9c98; text-decoration:none;
                    background:#e4e4e0;
                    }
                #menu-nav li.current-menu-item a  {
                background:url(images/active.png) center bottom no-repeat;
                }
                    #menu-nav li.current-menu-item a span {
                    background: #41618c; color:#f4f4f3;
                    }
    </style>
</head>
<body>
    <ul id="menu-nav">
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Artistse</span></a></li>
        <li><a href="#"><span>About</span></a></li>
        <li class="current-menu-item"><a href="#"><span>News</span></a></li>
        <li><a href="#"><span>Store</a></span></li>
        <li><a href="#"><span>Contact</a></span></li>
    </ul>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5347043

复制

相似问题

问基于父元素宽度的.Centering绝对定位div (Jquery)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于父元素宽度的.Centering绝对定位div (Jquery)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于父元素宽度的.Centering绝对定位div (Jquery)
EN