Question

我正在构建一个导航栏，在活动选项卡上有一个小箭头（参见附图）

希望看到 navigation bar 当前的看法 navbar 2

导航栏是根据我的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; }

我遇到的问题是，让箭头在每个标签上居中。目前，跨度的左侧是：0。通常，我会给它一个50％的值并设置一个负余量 - 左边是父母宽度的一半;然而，父母的宽度不断变化（因为每个标签都有不同的文字。所以，我需要一个jquery解决方案，根据它的父母宽度将箭头居中。我希望这是有道理的！

Answer 1

你不需要为此定位。请改用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为它腾出空间：< / p>

<!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>

Answer 2

我同意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>

。根据父级的宽度设置绝对定位的div（Jquery）

2 个答案: