How to position two anchors side by side
Question
I am making a navigation bar and have all the anchors up on it. I have some on the left and some on the right. The two divs are side by side on the navigation bar but the second anchor in each div goes under the first anchor.
I searched the web and tried everything I could find but none of the solutions I found worked.
body { background-color: #ec1320; color: #ec1320; } .nav-bar { background-color: #1524ea; color: white; height: 100px; position: absolute; width: 100%; height: 8%; left: 0px; top: 0px; } .nav-link { color: #d0d0d0; font-size: 20px; position: relative; margin-top: 5px; } .nav-link:hover { color: gray; } .nav-head { color: white; font-size: 30px; margin-top: -4px; } .nav-head:hover { color: gray; } .left-nav { position: absolute; left: 0px; } .right-nav { position: absolute; right: 0px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <body> <header> <nav class="nav-bar"> <div class='container'> <div class="left-nav"> <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a> <a href='index.html' class='nav-item nav-link'>Home</a> </div> <div class="right-nav"> <a href='login.html' class='nav-item nav-link'>Login</a> <a href='register.html' class='nav-item nav-link'>Register</a> </div> </div> </nav> </header> </body>
I need for each anchor to be positioned side by side with any other anchors in its parent div.
2 answers
solution1
0 2019-06-30 01:43:35
Since you're using Bootstrap, you can just put all your links within the same nav container. On you last left aligned link, set the right margin to auto (mr-auto). This will shift the remaining links to the right. I've played around with some of the styles to make it look better, including from switch the Bootstrap class from container to container-fluid:
body { background-color: #ec1320; color: #ec1320; } .nav-bar { background-color: #1524ea; color: white; } .nav-link { color: #d0d0d0; font-size: 20px; position: relative; } .nav-link:hover { color: gray; } .nav-head { color: white; } .nav-head:hover { color: gray; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <body> <header> <nav class="nav-bar"> <div class='container-fluid'> <nav class="nav"> <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a> <a href='index.html' class='nav-item nav-link mr-auto'>Home</a> <a href='login.html' class='nav-item nav-link'>Login</a> <a href='register.html' class='nav-item nav-link'>Register</a> </nav> </div> </nav> </header> </body>
solution2
0 ACCPTED 2019-06-30 02:09:28
Put your .right-nav and left-nav contents inside the flexbox.
Try this:
.right-nav, .left-nav {
display: flex;
}
And you will be good to go!
Hope it helps! Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.