I'm trying to create a basic horizontal navigation bar fixed at the top of the page, with 4 links included. I wanted the last two to be located at the right side of the nav bar with CSS, but I can't seem to do this without the order of the last 2 links getting reversed. I don't want to just switch the last 2 <li> elements in the HTML itself, since screen readers would read it in the reverse order.
Here's the CSS I did:
<stlye>
* {box-sizing: border-box;
padding: 0;
margin: 0;}
body {font-family: Helvetica, Arial, sans-serif;
color: #393939;}
header {font-size: 18px;}
ul.topnav {list-style-type: none;
margin:0;
padding-left: 300px;
padding-right: 300px;
overflow: hidden;
background-color: rgba(50, 150, 220, 1);
position: fixed;
top: 0;
width: 100%;}
ul.topnav li {float: left;}
ul.topnav li.right {float: right;}
ul.topnav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
ul.topnav li a:hover {background-color: rgb(200, 200, 200);}
ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}
@media screen and (max-width: 600px) {ul.topnav li.right,
ul.topnav li {float: none;}}
main {margin-top: 50px;
height: 1500px;
text-align: center;
line-height: 2;}
</style>
And here's my HTML:
<body>
<header>
<nav>
<ul >
<li><a href="home">Home</a></li>
<li><a href="dashboard">Explore</a></li>
<li ><a href="signup">Login</a></li>
<li ><a href="login">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Homepage Test</h1>
<h2>Warning: work in progress</h2>
<h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
</main>
</body>
Is there a better/more efficient way of doing this?
I've tried using "display: flex;" for the topnav class with the element and "justify-content: flex-end;" in the "right" class for the last two list elements to no avail.
CodePudding user response:
You can wrap the elements on the right in a span
or something and set the span
to have float: right
.
(Use fullscreen for best effect)
* {box-sizing: border-box;
padding: 0;
margin: 0;}
body {font-family: Helvetica, Arial, sans-serif;
color: #393939;}
header {font-size: 18px;}
ul.topnav {list-style-type: none;
margin:0;
padding-left: 300px;
padding-right: 300px;
overflow: hidden;
background-color: rgba(50, 150, 220, 1);
position: fixed;
top: 0;
width: 100%;}
ul.topnav li {float: left;}
ul.topnav span.right {float: right;}
ul.topnav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
ul.topnav li a:hover {background-color: rgb(200, 200, 200);}
ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}
@media screen and (max-width: 600px) {ul.topnav li.right,
ul.topnav li {float: none;}}
main {margin-top: 50px;
height: 1500px;
text-align: center;
line-height: 2;}
<body>
<header>
<nav>
<ul >
<li><a href="home">Home</a></li>
<li><a href="dashboard">Explore</a></li>
<span >
<li><a href="signup">Login</a></li>
<li><a href="login">Contact</a></li>
</span>
</ul>
</nav>
</header>
<main>
<h1>Homepage Test</h1>
<h2>Warning: work in progress</h2>
<h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
</main>
</body>