<header>元素不浮动右侧导航栏
[英]<header> element not floating right nav bar
问题描述
我不知道为什么我的带有导航的标题元素不会通过“float：right;”向右浮动
我刚刚开始使用 html&CSS 我希望有人可以帮助我的导航栏向右浮动。 我查了几个视频和堆栈溢出，但我不确定出了什么问题，我只是从 bootstrap、W3 和其他一些网站开始查找一些东西开始。
我的代码如下
*, html, body { margin: 0; padding: 0; } header { background-color: deepskyblue; } ul { list-style: none; } ul li { display: inline-block; } header nav { float: right 1; } header nav ul li a { padding-right: 30px; font-weight: bold; color: white; transition: all 0.5s ease-in-out; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <header> <div class="container"> <div class="row"> <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> --> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Work</a></li> <li><a href="">Services</a></li> <li><a href="">Clients</a></li> <li><a href="">Our Team</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> <p>This is some text.</p> </div> </header>
2 个解决方案
解决方案1
0 2020-03-19 20:31:05
只需删除container元素。
*, html, body { margin: 0; padding: 0; } header { background-color: deepskyblue; } ul { list-style: none; } ul li{ display: inline-block; } header nav { float: right; } header nav ul li a { padding-right: 30px; font-weight: bold; color: white; transition: all 0.5s ease-in-out; }
<!DOCTYPE html> <html> <head> <title>Website Project</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <header> <div class="row"> <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> --> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Work</a></li> <li><a href="">Services</a></li> <li><a href="">Clients</a></li> <li><a href="">Our Team</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> <p>This is some text.</p> </header> </body> </html>
解决方案2
0 已采纳 2020-03-19 20:38:13
这里 Bootraps .row 类正在向 div 添加弹性框，这在术语中阻止了浮动右侧的 css。 float 属性在 flex 容器中被忽略。
来自 flexbox 规范：
flex 容器为其内容建立一个新的 flex 格式化上下文。 这与建立块格式上下文相同，只是使用 flex 布局而不是块布局。 所以 float 不会创建浮动或清除 flex 项目。
删除 .row 类，您的浮动样式应该开始工作！
如何在导航栏中将文本元素向右浮动而png元素向左浮动
[英]How to float text element to right with png element to left in nav bar
使用 header 创建垂直导航栏，并根据图形向右形成
[英]Create vertical nav bar with both header and form to right as per graphic
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.