Question

我正在使用一个Web应用程序，我想在左侧显示徽标的导航栏，在右侧显示其他徽标的链接，但是当我使用某些方法在网上搜索时，一切似乎都被破坏了，所以我想知道我在做什么错，这是解决该问题的正确方法。

/*Body CSS*/
body{
    margin: 0px;
    padding: 0px;
    background-color:black;
    font-family: 'GlacialIndifferenceRegular';
    font-weight: normal;
    font-style: normal;
}

/*Video CSS*/
.bg-video-div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Navbar CSS*/
nav{
    width: 100%;
    background-color: rgba(0,0,0,0);
}

nav ul{
    text-align: right;
}
nav ul li{
    list-style: none;
    display: inline-block;
    float: right;
}

nav ul li a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 25px;
    transition: all ease 0.5s;
}

nav ul li a:hover{
    background-color: #34495e;
}

nav ul li img{
    width: 50px;
    height: 50px;
}

#logo{
    height:25%;
    width: 25%;
    float: left;
}

<!doctype html>
{%load staticfiles%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MediTracker</title>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
    <link rel="stylesheet" href="{% static 'home/css/home.css'%}">
    <link rel="shortcut-icon" type="image/ico" href="{%static 'home/favicon/favicon.ico'%}"/>
</head>
<body>
    <div class="bg-video-div">
        <video loop muted autoplay class="bg-video">
            <source src="{%static 'home/videos/background.mp4'%}" type="video/mp4">
        </video>
    </div>

    <nav>
        <ul>
            <li id="image"><img id="logo" align="middle" src="{%static 'home/logo/logo.png'%}" alt=""></li>
            <li><a href="{%url 'login'%}">Login</a></li>
            <li><a href="{%url 'register'%}">Register</a></li>
        </ul>
    </nav>
</body>
</html>

Answer 1

您的徽标的width中的25% 您的资产净值为width的{{1}} 此（总计125％）不适合放在100%内，frame的大小尝试不要设置100%中的width。如果显示为nav（css block），它将自动占用整个可用水平空间。如果这样做不起作用，请尝试将display:block设置为width。

想要在导航栏的屏幕左侧显示我的徽标，在右侧显示其他元素

1 个答案: