Question

我一直在尝试创建一个导航栏，其中4个链接保持在右侧，同时保留左侧的徽标。如何完成这项任务？我的代码有点混乱，因为我一直在尝试许多不同的方法。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wolfgang's Portfolio</title>


    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>
<div id="container">

    <a id="logo" href="home.html" alt="Wolfgang's logo">Wolfgang Hall</a>


    <ul class="nav">
        <li><a href="about-me.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="contact-info.html">Contact</a></li>
    </ul>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; 
    padding: 0; 
    border: 0;
}

body {
    background-color: #2a2c2b;
    font: 16px Josefin Sans; 
    color: #d9cb93; 
line-height: 24px;
} 

a:link {
    color: #d9cb9e; 
}

a:visited {
    text-decoration: none;
    color: #d9cb9e; 
 }

#container {
    width: 960px; 
    margin: 0 auto;
}

#logo {
    margin: 10px auto 0 auto; 
    position: absolute;
    text-decoration: none;
    width: 100px;
}

#logo a:hover {
    color: #dc3522;
}

#header {
    width: 480px;
}

ul.nav {
   width: 500px;
   height: 30px;
   margin: 0 auto;
   padding: 0;
   list-style: none;
   background-color: #DC3522;
   text-align: center;
   font-family: 'Cardo';
   position: relative;

}

.nav li {
    display: inline-block;
    width: 25%;
    margin: 0;
    padding: 0;
}

.nav a {
    text-align: center;
    padding: 0 0 0 0; 
    text-decoration: none;
    margin: 0;
    border-right: 1px solid #d9cb9e;
    display: block;
    font-size: 24px;
    float: right;
}

.nav a:hover {
    background: #374140;
    border: none;
}

Answer 1

所以基本上你想要将你的徽标浮动到左边并将你的导航浮动到右边。

#logo {
  float:left;
}
ul.nav {
  float:right;
}

不要漂浮您的导航链接。

除此之外，因为您的＆lt; li＆gt;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;否则你必须漂浮每一个“左”。

此外，当您使用浮动时，您必须始终清除它们。您可以使用我在小提琴中使用的方法，添加一个div并将其设置为“两者”，或者您可以google＆＃34; clearfix＆＃34;并且只要你需要清除div，就使用该类。

https://jsfiddle.net/5176b7gk/

Answer 2

使用浮点数可以很容易地解决它。这是一个只显示顶层菜单的示例页面，您可以看到如何在div中格式化徽标和导航的建议，这使您可以更好地控制菜单作为完整的UI元素。

<强> HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wolfgang's Portfolio</title>
</head>

<body>
    <div id="container">

        <div id="top_menu">
            <div class="branding">
                <a id="logo" href="home.html">Your Logo</a>
            </div>

            <ul class="nav">
                <li><a href="about-me.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact-info.html">Contact</a></li>
            </ul>
        </div>

        <div id="main">
            <!-- Rest of the page here -->
        </div>

    </div><!-- Container ends -->
</body>

</html>

<强> CSS

#container {
            width: 960px;
            margin: 0 auto;
        }
        .branding {
            float: left;
        }
        .nav {
            list-style: none;
            position: relative;
            float: right;
        }
        .nav li {
            display: inline-block;
        }

4件导航栏问题

2 个答案: