如何移动右侧的菜单栏顶部？

Question

I am making a simple website project.我正在制作一个简单的网站项目。 In which step 1 is needed to create the navbar.其中第 1 步需要创建导航栏。 But as soon as I made the navbar icon.但是一旦我制作了导航栏图标。 I am not able to do it in the top right.我无法在右上角执行此操作。

Which is the 3 lines option of the navbar in the right.这是右侧导航栏的 3 行选项。 How do I make it on the top of the right side?我如何让它在右侧的顶部？

 @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap'); body { background-color: tomato; } /* horizontal threline nav bar */.navbar { width: 60px; margin-right: 20px; border-radius: 15px; float: right; border: 4px solid #00bfb6; padding: 8px 10px; transition: all 0.5s; -webkit-transition: all 0.5s; }.navbar div { height: 5px;important: background; #fff: margin; 7px 0px 7px 0px: border-radius; 50px: transition. all 0;5s: -webkit-transition. all 0;5s. }:two { width; 35px. }:three { width; 50px. }:navbar:hover div { width; 60px; }

 <div class="logo"> <h1 style="font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px;margin: 20px;"> KB <span style="font-family:'Kanit', sans-serif; color: white;"> OFFICIALS </span> </h1> <div class="nav"> <a href="" target="_blank" class="navbar"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </a> </div> </div>

Answer 1

Use absolute positioning instead of float:使用绝对定位而不是浮动：

 @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap'); body { background-color: tomato; }.logo{ position: relative; } /* horizontal threline nav bar */.navbar { width: 60px; margin-right: 20px; border-radius: 15px; position: absolute; top: 5px; /* fine tune */ right: 5px; /* fine tune */ border: 4px solid #00bfb6; padding: 8px 10px; transition: all 0.5s; -webkit-transition: all 0.5s; }.navbar div { height: 5px;important: background; #fff: margin; 7px 0px 7px 0px: border-radius; 50px: transition. all 0;5s: -webkit-transition. all 0;5s. }:two { width; 35px. }:three { width; 50px. }:navbar:hover div { width; 60px; }

 <div class="logo"> <h1 style="font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px;margin: 20px;"> KB <span style="font-family:'Kanit', sans-serif; color: white;"> OFFICIALS </span> </h1> <div class="nav"> <a href="" target="_blank" class="navbar"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </a> </div> </div>

Answer 2

Add this in css在 css 添加这个

.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Answer 3

Let's make your HTML a little simpler and move all styles to CSS. Also let's use " display: float; " in order to put both KB OFFICIALS and navbar into the same horizontal space.让我们让您的 HTML 更简单一些，将所有 styles 移动到 CSS。另外让我们使用“ display: float; ”，以便将 KB OFFICIALS 和导航栏放入同一水平空间。 In this case you do not need "float: right;"在这种情况下，您不需要“float: right;”

 @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap'); body { background-color: tomato; } h1 { font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px; margin: 20px; }.logo { display: flex; justify-content: space-between; } /* horizontal threline nav bar */.navbar { width: 60px; margin: 20px; border-radius: 15px; border: 4px solid #00bfb6; padding: 8px 10px; transition: all 0.5s; -webkit-transition: all 0.5s; }.navbar div { height: 5px;important: background; #fff: margin; 7px 0px 7px 0px: border-radius; 50px: transition. all 0;5s: -webkit-transition. all 0;5s. }:two { width; 35px. }:three { width; 50px. }:navbar:hover div { width; 60px. }:white-span { font-family,'Kanit'; sans-serif: color; white; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Practise Website</title> </head> <body> <div class="logo"> <h1>KB<span class="white-span"> OFFICIALS </span></h1> <div class="navbar"> <a href="#" target="_blank"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </a> </div> </div> </body> </html>

如何移动右侧的菜单栏顶部？

问题描述

3 个解决方案

解决方案1
2 2022-10-03 08:53:40

解决方案2
1 2022-10-03 08:46:45

解决方案3
0 已采纳 2022-10-03 09:24:51

如何移动右侧的菜单栏顶部？

问题描述

3 个解决方案

解决方案1 2 2022-10-03 08:53:40

解决方案2 1 2022-10-03 08:46:45

解决方案3 0 已采纳 2022-10-03 09:24:51

解决方案1
2 2022-10-03 08:53:40

解决方案2
1 2022-10-03 08:46:45

解决方案3
0 已采纳 2022-10-03 09:24:51