I'm trying to create a horizontal line underneath my nav bar, the only problem is that the line breaks. How do I get the line to go all the way across the page? I tried using border and using hr is the closest I can get to what I want but I need it to go all the way across.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<ul >
<li >
<a aria-current="page" href="#">Get a Quote</a>
</li>
<li >
<a aria-current="page" href="#">Contact Us</a>
</li>
<li >
<a aria-current="page" href="#">Sign In</a>
</li>
<hr >
</ul>
</body>
</html>CSS:
body {
margin:0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
}
hr.solid {
border-top: 2px solid #0C133C;
}
CodePudding user response：
Just a few things holding you back here.
Think of every element on the page as a box first we need to make sure your boxes are the well organized before we can decorate them.
You've got a tiny box nav which is floating right on the page. It's tiny because it's an inline element. We need a big long box to cover the entire top of the page first and the nav element can be inside that one.
For our big box we want to use a block element like div. We decorate the big box with the border-bottom attribute including the width and color to get the bar we want.
There is another catch. Because you're floating right it will reorg the page and make a mess. We need a way to clear the float after. Notice the clearer div added to the snippet
body {
margin:0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
.navbar {
border-bottom: 3px solid black;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div >
<ul >
<li >
<a aria-current="page" href="#">Get a Quote</a>
</li>
<li >
<a aria-current="page" href="#">Contact Us</a>
</li>
<li >
<a aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div ></div>
</div>
</body>
</html>CodePudding user response：
well. wish add this css in your styles.css and remove the hr tag can solve ur problem
.nav {
float: right;
text-align: left;
margin: 0;
position: relative;
}
.nav::after{
content: '';
height: 2px;
position: absolute;
display: block;
right: 0;
width: 100vw;
bottom: 2px;
background-color: #000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<ul >
<li >
<a aria-current="page" href="#">Get a Quote</a>
</li>
<li >
<a aria-current="page" href="#">Contact Us</a>
</li>
<li >
<a aria-current="page" href="#">Sign In</a>
</li>
<!-- <hr /> -->
</ul>
</body>
</html>normally i will do like this:
body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
.nav {
float: right;
text-align: left;
margin: 0;
position: relative;
}
/* new css here */
.nav-bar {
border-bottom: 2px solid #0c133c;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* new css here */
.nav > li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0c133c;
font-size: 18px;
}
hr.solid {
border-top: 2px solid #0c133c;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<!-- add a father element -->
<div >
<ul >
<li >
<a aria-current="page" href="#">Get a Quote</a>
</li>
<li >
<a aria-current="page" href="#">Contact Us</a>
</li>
<li >
<a aria-current="page" href="#">Sign In</a>
</li>
</ul>
</div>
</body>
</html>CodePudding user response：
Use from flex instead float:
body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
display: flex;
justify-content: flex-end;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
}
hr.solid {
border-top: 2px solid #0C133C;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" </head>
<body>
<ul >
<li >
<a aria-current="page" href="#">Get a Quote</a>
</li>
<li >
<a aria-current="page" href="#">Contact Us</a>
</li>
<li >
<a aria-current="page" href="#">Sign In</a>
</li>
<!-- <hr > -->
</ul>
<hr >
</body>
</html>CodePudding user response：
The typical browser sets the margin to roughly half a character's width. But you can change this to any value you want. This can add quality white space to your layouts and emphasize the content break.
hr
{
width: 80%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 100px;
margin-bottom:100px;
}