Question

whenever I add an tag to the list items in my nav it breaks the positioning. I'm probably missing something really stupid, though I can't remember how to fix it. Any help would be appreciated. Thanks!

HTML:

    <header id="header">
                <h1>Title</h1>
                <p>Subtitle</p>

                <hr>

<!-- With <a> tags -->
                <nav>
                    <ul>
                        <a href="#"><li class="current">Home</li></a>
                        <a href="#"><li>Portfolio</li></a>
                        <a href="#"><li>Contact</li></a>
                    </ul>
                </nav>

<!-- Without <a> tags -->
                <nav>
                    <ul>
                        <li class="current">Home</li>
                        <li>Portfolio</li>
                        <li>Contact</li>
                    </ul>
                </nav>
            </header>

CSS:

    /* From CSS Reset */

a {
    font-size: 1em;
    background:transparent;
    text-decoration: none;
}

/* From main css */

#header {
    text-align: center;
}
    #header > h1 {
        margin-bottom: 10px;
    }

    #header > p {
        font-size: 1.5em;
    }
    #header > hr {
        width: 600px;
        margin: 1.5em auto;
    }
    nav {

    }
        nav > ul > li, nav > ul >   a {
            text-transform: uppercase;
            padding: 3px 1em;
            display: inline;
            border-right: 2px solid #aaaaaa;
        }
            nav > ul > li:last-child {
                border: 0;
            }
            nav > ul > li:hover:not(.current) {
                background: #e3e3e3;
                border: 0;
                padding: 3px 1.1em;
            }

JSFiddle: http://jsfiddle.net/x2okwvwv/

Answer 1

ul必须始终跟随li <ul> <li> <a> .. </a> </li></ul>

Answer 2

<ul> <a>代码中元素的顺序错误。

在<ul>下，我们必须直接<li>，<li>您可以拥有作品

Answer 3

将您的锚标记放在li标签内。像这样：

<nav>
    <ul>
        <li class="current"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

添加<a> tag breaks positioning

3 个答案: