<header>元素不浮动右侧导航栏
[英]<header> element not floating right nav bar
问题描述
I'm not sure why my header element with the nav won't float to the right with "float: right;"
我不知道为什么我的带有导航的标题元素不会通过“float：right;”向右浮动
I'm just getting started with html&CSS I was hoping someone could help make my nav bar float to the right.我刚刚开始使用 html&CSS 我希望有人可以帮助我的导航栏向右浮动。 I've looked up a couple of videos and stack overflows but I'm not sure what's wrong I just started by looking up a few things to get started from bootstrap, W3 and some other sites.我查了几个视频和堆栈溢出，但我不确定出了什么问题，我只是从 bootstrap、W3 和其他一些网站开始查找一些东西开始。
my code below我的代码如下
*, 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
Just remove the container element.只需删除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
Here the Bootraps .row class is adding flex box to the div which in term is blocking the float right css.这里 Bootraps .row 类正在向 div 添加弹性框，这在术语中阻止了浮动右侧的 css。 The float property gets ignored in a flex container. float 属性在 flex 容器中被忽略。
From the flexbox specification:来自 flexbox 规范：
A flex container establishes a new flex formatting context for its contents. flex 容器为其内容建立一个新的 flex 格式化上下文。 This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.这与建立块格式上下文相同，只是使用 flex 布局而不是块布局。 so float does not create floating or clearance of flex item.所以 float 不会创建浮动或清除 flex 项目。
remove the .row class and you float style should start work!删除 .row 类，您的浮动样式应该开始工作！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.