将导航栏的元素移到最左侧
[英]shift an element of nav bar to left most side
问题描述
I have the following Nav bar. 
我有以下导航栏。 I want to shift the Login/Register Component of it on the very left most of the nav bar but can't find a way to do it. 我想在导航栏的最左侧移动它的“登录/注册”组件，但是找不到解决方法。 What might be the possible solution, I have tried the padding-left:0 thing on the login li element but this does not seem to work. 可能是可能的解决方案，我在login li元素上尝试了padding-left：0，但这似乎不起作用。 Any help in this would be appreciated 任何帮助，将不胜感激
HTML: HTML：
body { margin: 0; background: #222; font-weight: 300; background-image: url('bg.jpeg'); } header { background: #d9c2ac; position: relative; } header::after { content: ''; display: table; clear: both; } nav { float: left; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 30px; position: relative; } nav ul li a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: bold; } nav a:hover {} nav a::before { content: ''; display: block; height: 5px; width: 0%; background-color: #444; transition: all ease-in-out 500ms; } nav a:hover::before { width: 100%; } form .form { float: right; } .search-bar { float: right; } ul li:last-child { position: absolute; right: 0; bottom: 0; margin: 15px; margin-bottom: 0px; padding: 0; }
<body> <header> <div class="container" id="#home"> <nav> <ul> <li id="login"> <a href="#login" style="text-align: left;"> Login/Register </a> </li> <li> <a href="#home"> Home </a></li> <li> <a href="#about"> About </a></li> <li> <a href="#"> Services </a></li> <li> <a href="#Products"> Products </a></li> <li> <a href="#contact"> Contact Us </a></li> <li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li> </ul> </nav> </div> </header>
3 个解决方案
解决方案1
1 2018-02-15 05:29:04
解决方案2
1 2018-02-15 05:57:37
Use rm-auto to set the margin right to 0 使用rm-auto将右边距设置为0
.navbar-tan { background-color:tan; }
<html> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm navbar-tan" > <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Login/Register</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Contact Us</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <input type="text" name="" placeholder="Search" class="form-control"> </li> </ul> </nav>
解决方案3
0 2018-02-15 05:32:18
Try to make use of Flexbox here...and use margin utilities to align the first and last item... 尝试在此处使用Flexbox ...并使用margin实用工具对齐第一个和最后一个项目...
...apply margin-right:auto to the first element to align it left most corner ...将margin-right:auto应用于第一个元素以将其最左角对齐
...and apply margin-left:auto to the last element to align it right most corner.. ...然后将margin-left:auto应用于最后一个元素以将其最右边对齐。
I have also changed your some css and also removed all the float values. 我还更改了一些CSS，还删除了所有float值。 Also no need to use position:absolute here for the search-box. 同样，此处无需在搜索框中使用position:absolute 。
Stack Snippet 堆栈片段
body { margin: 0; background: #222; font-weight: 300; background-image: url('bg.jpeg'); } header { background: #d9c2ac; position: relative; } nav ul { margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px 0; } nav li { position: relative; margin: 0 10px; } nav ul li a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 12px; font-family: verdana; } nav a:hover {} nav a::before { content: ''; display: block; height: 5px; width: 0%; background-color: #444; transition: all ease-in-out 500ms; } nav a:hover::before { width: 100%; } nav ul li:first-child { margin-right: auto; } nav ul li:last-child { margin-left: auto; }
<header> <div class="container" id="#home"> <nav> <ul> <li id="login"> <a href="#login" style="text-align: left;"> Login/Register </a> </li> <li> <a href="#home"> Home </a></li> <li> <a href="#about"> About </a></li> <li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li> </ul> </nav> </div> </header>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.