將導航欄的元素移到最左側
[英]shift an element of nav bar to left most side
問題描述
我有以下導航欄。 我想在導航欄的最左側移動它的“登錄/注冊”組件，但是找不到解決方法。 可能是可能的解決方案，我在login li元素上嘗試了padding-left：0，但這似乎不起作用。 任何幫助，將不勝感激
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
使用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
嘗試在此處使用Flexbox ...並使用margin實用工具對齊第一個和最后一個項目...
...將margin-right:auto應用於第一個元素以將其最左角對齊
...然后將margin-left:auto應用於最后一個元素以將其最右邊對齊。
我還更改了一些CSS，還刪除了所有float值。 同樣，此處無需在搜索框中使用position:absolute 。
堆棧片段
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>
導航欄項目是合理的，但是單擊中間的項目會使其向左移動
[英]Nav bar items are justified, but clicking the middle one causes it to shift left
導航欄上的菜單項和導航欄左側的公司圖標
[英]menu items on the navigation bar and company icon on the left side of the nav bar
如何在導航欄中將文本元素向右浮動而png元素向左浮動
[英]How to float text element to right with png element to left in nav bar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.