Hi, can someone please tell me how i can make the borders of my anchor elements in the navigation element match the length of the text. When i set display : block; the borders takes 100% of the width instead of wrapping around the text. And when i set display :inline-block; it appears like this:
Here is the html code:
<nav id="navbar">
<header>Learn Cpp</header>
<a class="nav-link" href="#introduction_to_cpp">Introduction to Cpp</a>
<a class="nav-link" href="#keywords">Keywords</a>
<a class="nav-link" href="#variables">Variables</a>
<a class="nav-link" href="#data_types">Data Types</a>
<a class="nav-link" href="#object">Object</a>
<a class="nav-link" href="#introduction_to_functions">Introduction to Functions</a>
</nav>
And here’s the CSS code:
* {
box-sizing: border-box;
}
@media (max-width: 768px) {
body {
flex-direction: column;
}
}
body {
font-size: 20px;
background-color: #ffff;
display: flex;
flex-direction: column;
}
section{
min-width: 900px
}
nav {
width: 100%;
text-align: left; /* Aligns the links to the left */
}
.nav-link {
display: inline-block; /* Allow it to wrap around the text */
padding: 2px 5px;
margin: 2px 10px;
text-decoration: none;
color: indigo;
border: 2px solid #ddd;
width: auto; /* Ensure width fits content */
}
header {
color: indigo;
border-bottom: 2px solid indigo;
white-space: nowrap; /* Prevents text wrapping */
font-size: 30px;
}
nav header {
font-size: 40px;
font-weight: bold;
color: grey;
}