Question

我需要帮助才能在导航栏中实现我的徽标图片。我尝试了很多方法尝试这样做，但我从来没有管理过。徽标最终位于我的菜单顶部，而不是与它一致。

<head>
    <link rel="stylesheet" type="text/css" href="Homestyle.css">
    <meta charset="UTF-8">
</head>

<body>

    <div>
        <img class="left" src="logo.png" alt="logo">
        <ul class="nav">
            <li><a class="active" href="Homepage.html"> Home</a></li>
            <li><a href="Aboutpage.html"> About</a></li>
            <li><a href="Workpage.html"> Our Work</a></li>
            <li><a href="Servicespage.html"> Services</a></li>
            <li><a href="Contactpage.html"> Contact</a></li>
        </ul>
</div>
</div>
        </body>

</html>

.nav{
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-color: #3399ff;
    border: 1px solid #555;
    overflow: hidden;
    width:100%;
    top:0;
    padding-left: 200px;
}

.nav li a{
    display: block;
    color: #fff;
    padding: 16px 10px;;
    text-decoration: none;
    text-align: center;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.nav li{
    float: left;
}

.nav li a.active{
    background-color: #3399ff;
    color: white;
}

.nav li a:hover.active{
    background-color: #4da6ff;
}

.nav li a:hover:not(.active){
    background-color: #4da6ff;
    color: white;
}

body{
    margin: 0;
    background: url("backtest3.jpg");
    background-size: 100%;
}

.nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
  display:inline;
  vertical-align:top;
}

.left { float: left; }

Answer 1

尝试以下方法：

.nav {
    float:left;
    width: calc(100% - 100px) /* apply the logo width instead of 100px */
}

Answer 2

将徽标放入navaber并按如下方式给它填充：

.nav{
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-color: #3399ff;
    border: 1px solid #555;
    overflow: hidden;
    width:100%;
    top:0;
    padding-left: 200px;
}

.nav li a{
    display: block;
    color: #fff;
    padding: 16px 10px;;
    text-decoration: none;
    text-align: center;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.nav li{
    float: left;
}

.nav li a.active{
    background-color: #3399ff;
    color: white;
}

.nav li a:hover.active{
    background-color: #4da6ff;
}

.nav li a:hover:not(.active){
    background-color: #4da6ff;
    color: white;
}

body{
    margin: 0;
    background: url("backtest3.jpg");
    background-size: 100%;
}

.nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
  display:inline;
  vertical-align:top;
}

.left { float: left; padding: 16px 10px; }

    <div>

        <ul class="nav">
                <img class="left" src="logo.png" alt="logo">
            <li><a class="active" href="Homepage.html"> Home</a></li>
            <li><a href="Aboutpage.html"> About</a></li>
            <li><a href="Workpage.html"> Our Work</a></li>
            <li><a href="Servicespage.html"> Services</a></li>
            <li><a href="Contactpage.html"> Contact</a></li>
        </ul>
</div>

我需要将徽标放入导航栏。会发生什么是徽标显示在我的菜单上。

2 个答案: