Question

所以我是HTML / CSS的新手，我一直在关注Tutsplus和Treehouse教程。为了获得实践，我一直在随机主题上创建自己的模拟网站，因为我获得了有关HTML / CSS的知识。但是，我遇到了障碍。我正在尝试使用display：inline进行水平导航我已经完成了自己的研究，并尝试了多种似乎与我的问题相关的解决方案。我使用了浮点数，所以有人建议使用内联块或溢出。我不能说我对溢出或块有足够的了解才能正确使用它。无论如何，我想让我的导航水平。我是新手，所以我会尽力附上代码。这是我的代码和/或代码链接：

http://cdpn.io/pwbCq

HTML

 <html>
    <head>
        <title>Tenkara Fishing</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head> 

<body>
    <div class="wrap">
    <div class="heading">


     <h1>Tenkara For Beginners</h1>


        <p>Tenkara is the simple Japanese method of fly-fishing where only a <em>rod, line and fly</em> are used.</p>
    </div>
    <div class="nav">
        <ul id="linksnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Lessons</a></li>
            <li><a href="#">Shop</a></li>
        </ul>
    </div>  
    <div class="content">
            <h3 class="centeredtext">Important Terminology</h3>
            <dl>
                <dt class="definitions">Tenkara Fly</dt>
                    <dd>Made of mostly feather and thread, they place more emphasis on manipulation rather than imitation</dd>
                <dt class="definitions">Tippet</dt>
                    <dd>It is the thin line that goes between the tenkara line and the fly. Prevents the fish from seeing a thicker line on the water.</dd> 
            </dl>
            <br/>
            <blockquote>"I can see a day when I hike into my favorite small stream with just my tenkara rod and a few flies. It's a fishing style designed to have as little between the angler, nature and the trout as possible. And that's what I'm after..." <strong>- Ed Engle</strong></blockquote>
            <br/>
            <img class="displayed" src="img/fish.png" alt="fish" /> 
        </div>
        <aside>
            <h3>Resources</h3>
            <ul>
                <li>
                    <a href="http:///tenkarausa.com">Tenkara USA</a>
                </li>
                <li>
                    <a href="http://tenkararodco.com" target= "_blank">Tenkara Rod Co.</a>
                </li>
                <li>
                    <a href="http://tenkarabum.com">Tenkara Bum</a>
                </li>
            </ul>
        </aside>    
    </div>  
    </body>
</html>

CSS

 body {
    background-color: #C0D9AF;
    width: 600px;
    margin: auto;
    }

    .wrap {
    min-width: 80%;
    width: 600px;
    margin: auto;
    overflow: hidden;
    }

    .heading {
    text-align: center;
    margin: auto;
    }

    a {
    color: green; 
    text-decoration: none;
    }

    h1 {
    color: #391600;
    font-family: sans-serif;
    }

    .definitions {
    font-style: italic;
    font-weight: bold;
    }

    blockquote {
    border: 2px solid green;
    text-align: center;
    }

    .centeredtext {
    text-align: center;
    }

    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    } 

    aside {
    float: left;
    }

    aside ul {
    padding-left: 15px;
    padding-right: 10px;
    list-style-type: none;
    }

    aside h3 {
    padding-left: 15px;
    padding-right: 10px;
    }

    .content {
    float: left;
    width: 450px;
    }

    .nav ul {
    display: inline;
    list-style: none;
    }

谢谢！

Answer 1

在您的实例中，您需要制作实际的li元素inline-block。您似乎尝试将父ul设为inline元素。

.nav ul li {
    display: inline-block;
}

UPDATED EXAMPLE HERE

内联导航

1 个答案: