.Centering absolutely positioned div based on parent's width (Jquery)_问答_开发者

I am building a navigation bar that has a tiny arrow on the active tab (see attached picture)

DESIRED LOOK

.Centering absolutely positioned div based on parent's width (Jquery)

The navigation bar is dynamically created based on my wordpress pages. The problem I am having is centering the little arrow on the active tab.

Currently, I am using jquery to place span tags after the current/active link.

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

and my css is as follows:

#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; }

The problem I am having is again, getting the arrow to be centered on each tab. Currently, the span has a positoion of left:0. Typically, I would give it a value of 50% and set a negative margin-left of half the parent's width; however, the parent's widths keep changing (because each tab has different text. SO, I need a jquery solution that will center the arrow based on it's parents width. I hope that makes sense!

You don't need positioning for this. Use display:block and margin:auto instead:

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

For the record, I think you're taking the completely wrong approach and should ditch the JavaScript, instead changing the background image of the <li> element, using padding-bottom to make room for it:

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

I'm agree with LeguRi, try without Javascript, this is another approach with css, i like to put always a SPAN tag inside my link, you get one more level for use 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>