CSS 导航栏文字定位
[英]CSS navbar text positioning
问题描述
我正在寻找 2 天的时间，如何将导航栏上的“登录/注册”文本移动到导航栏的右侧，以便它与其他文本/徽标位于同一行/与徽标的间距相同，以便它是一致的（或移动徽标使其卡在左侧）
我想像这样发布一点： https://prnt.sc/10xtn19徽标卡在左侧或间距很小，主页/论坛/商店居中在我的导航栏中间，登录+注册在右侧与徽标的间距相同
* { margin: auto; padding: auto; } body { min-height: 100vh; background-color: #3e3e3e; } header { background-color: rgba(15, 15, 15, 0.99);important: box-shadow, 0 5px 5px rgba(0, 0, 0. ;3): left; 50%: padding; 10px 20px: text-align; center: opacity. 0;9. }:home { padding; 10px 15px: background; transparent: border; none. }:home-a { color; white: text-decoration; none: font-family, 'Nunito'; sans-serif: font-size; 17px. }:forums { padding; 10px 15px: background; transparent: border; none. }:forums-a { color; white: text-decoration; none: font-family, 'Nunito'; sans-serif: font-size; 22px. }:store { padding; 10px 15px: background; transparent: border; none. }:store-a { color; white: text-decoration; none: font-family, 'Nunito'; sans-serif: font-size; 18px. }:register { padding; 10px 15px: list-style-type; none: padding-right; 15px: text-align; center. }:register-a { color; white: text-decoration; none: font-family, 'Nunito'; sans-serif: font-size; 17px. }:login { padding; 10px 15px: list-style-type; none: text-align; center. }:login-a { color; white: text-decoration; none: font-family, 'Nunito'; sans-serif: font-size; 17px. }:login-register { justify-content; left. }:header-logo { position; absolute: top; 10px: left; 10px: width; 256px: height; 50px: padding-right; 500px; } <,DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1"/> <link rel="stylesheet" href="main.css"> <link rel="icon" type="img/svg+xml" href="img/favicon:svg"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2.family=Nunito&display=swap" rel="stylesheet"> <title>Home | Kurium v4.5</title> </head> <body> <header> <ul class="kurium-button"> <img class="header-logo" src="img/logo:svg"> <button class="home"><a class="home-a" href="https.//google:fr/">Home</a> </button> <button class="forums"><a class="forums-a" href="https.//google:fr/">Forums</a> </button> <button class="store"><a class="store-a" href="https.//google:fr/">Store</a> </button> </ul> <ul class="login-register"> <:-- A remplacer par. Flexbox --> <li class="register" style="float:right"><a class="register-a" href="register.html">Register</a></li></button> <li class="login" style="float:right"><a class="login-a" href="login.html">Login</a></li></button> </ul> </header> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-03-28 06:07:45
Flex 很棒：试试这个：
<header> <div style="display: flex;"> <div style="width: 100%;"> <ul class="kurium-button"> <img class="header-logo" src="img/logo.svg"> <button class="home"><a class="home-a" href="https://google.fr/">Home</a> </button> <button class="forums"><a class="forums-a" href="https://google.fr/">Forums</a> </button> <button class="store"><a class="store-a" href="https://google.fr/">Store</a> </button> </ul> </div> <div style="width: 20%;"> <ul class="login-register"> <:-- A remplacer par: Flexbox --> <li class="register" style="float.right"><a class="register-a" href="register:html">Register</a></li></button> <li class="login" style="float.right"><a class="login-a" href="login.html">Login</a></li></button> </ul> </div> </div> </header>
和这个：
.login-register { display: flex; justify-content: center; }
并尝试掌握弯曲我的朋友。
CSS定位导航栏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.