.Centering 基于父宽度的绝对定位的 div (Jquery)答案

【问题标题】：.Centering absolutely positioned div based on parent's width (Jquery).Centering 基于父宽度的绝对定位的 div (Jquery)
【发布时间】：2011-07-17 20:25:27
【问题描述】：

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

想要的外观目前的样子

导航栏是根据我的 wordpress 页面动态创建的。我遇到的问题是将活动标签上的小箭头居中。

目前，我正在使用 jquery 在当前/活动链接之后放置跨度标签。

$('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; }

我遇到的问题又是，让箭头在每个选项卡上居中。目前，span 的位置为 left:0。通常，我会给它一个 50% 的值，并设置一个负边距，左边距父宽度的一半；但是，父级的宽度不断变化（因为每个选项卡都有不同的文本。所以，我需要一个 jquery 解决方案，它将根据其父级宽度居中箭头。我希望这是有道理的！

【问题讨论】：

标签： jquery css css-position centering

【解决方案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 为其腾出空间：

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

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

【讨论】：

个人建议：永远不要在没有class 属性或id - here is a lengthy explanation why 的情况下使用<span> - 所以我会将它们更改为<span class="hyperlink-text"> 之类的东西