The borders of my anchor tags extend beyond the boundaries of the parent nav element

Having an issue where the navigation elements are expanding vertically outside of their parent container. Specifically looking for a solution to prevent the <a> tags from extending beyond the boundaries of the wrapping <nav> parent element. View this image highlighting the problem.

nav {
  padding: 0em 1em 0 0;
  border-bottom: 1px solid white;
}

.head nav a {
  padding: .5em .5em;
  font-size: .9em;
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
}

.head nav a:hover {
  border-bottom: 1px solid white;
}
<nav>
  <a href="">Latest News</a>
  <a href=""> Upcoming Events</a>
  <a href="">Official </a>
  <a href="">Domestic Rowing</a>
  <a href="">High Performance</a>
  <a href="">Coaching</a>
  <a href="">Resources</a>
</nav>

htmlcss

Answer №1

Consider including display: inline-block within your anchor tags.

body {
  background: blue;
}

header {
  padding: 0em 1em 0 0;
  border-bottom: 1px solid black;
}

header a {
  display: inline-block;
  padding: .5em .5em;
  font-size: 1em;
  transition: all 0.5s;
  border-bottom: 1px solid transparent;
}

header a:hover {
  border-bottom: 1px solid black;
}
<header>
  <a href="">New Products</a>
  <a href="">Special Offers</a>
  <a href="">Featured Items</a>
  <a href="">Best Sellers</a>
  <a href="">Clearance Sale</a>
</header>

Answer №2

By including a number at the start when using the border-bottom property, you have the ability to adjust its width. Check out this helpful resource for more information on how to utilize border-bottom:.

Answer №3

Here is your code:

nav {
    padding: 0em 1em 0 0;
    border-bottom: 1px solid white;
}

And here is the solution:

nav {
    padding: 0em 1em 0 0;
    border-bottom: 1px solid white;
    white-space: nowrap;
}

Your navigation won't extend to the bottom now, you'll just need to adjust the width of your nav to your preference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to stop the parent container from causing the child element set as fixed to scroll

When I have a parent and children with the property 'overflow:auto', scrolling the children causes the parent to start scrolling after it reaches the end. How can this be prevented? I do not want the parent container to scroll even after the chi ...

javascripthtmlcss

Switch the Ionic Slide Box to the "does-continue" setting

Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...

javascriptcssangularjsionic-framework

Optimizing CSS Styles for Mobile Devices

I am having trouble adjusting the CSS on my website to make it more mobile-friendly. The site renders correctly in major desktop browsers like Chrome, IE, and Firefox, but there are issues with the rendering when viewed on mobile Safari or Chrome. Interest ...

htmlcss

I am attempting to create basic animations using css, but I'm having some trouble

Currently, I am attempting to add animation to a css div without including the top property in the original div style. I omitted it because I wanted to delay the animation, so I placed it within the @keyframes property. However, the element disappears afte ...

htmlcssreactjsanimation

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

My tables are causing a horizontal scroll bar to appear when converted to Bootstrap data tables. Adding the "p-3" class to the table's div for padding eliminates the scroll bar but also narrows the table. Is there a solution to removing the scroll b ...

htmlcssbootstrap-4datatablesspacing

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

phphtmlmysql

Refresh source URL on HTML5 video using React

Is there a way to change the source URL in an HTML5 video element by clicking a button, allowing for seamless switching between different videos? I have a Clip component that generates an HTML5 video element, with the source URL passed through props. fun ...

javascripthtmlreactjsvideo

Why is the ng-click not functioning for the checkbox when the page loads but works only when the page is refreshed

When the file loads, the checkbox does not work, but it works after refreshing the page. This is my template: <div class="checkbox"> <label> <input type="checkbox" id="farmCat" class="farmCatCrop" ng-click="valueChangedTwo()"&g ...

javascriptjqueryhtmlangularjscheckbox

Batch download files as a zip file using JavaScript

Is there a straightforward method in JavaScript to download multiple files from URLs and save them as a zip archive? Which specific files are required for downloading in order to generate the zip file? ...

javascriptjqueryhtmlcsstwitter-bootstrap

Finding a predecessor with Selenide through tag and class identification

Trying to find the ancestor element using Selenide library on a website. The ancestor element is <div class="BorderGrid-cell" ...>. The .closest(".BorderGrid-cell") method works well. However, the .closest("div.BorderGrid-ce ...

cssselenide

Cards in Bootstrap 4 not adhering to sticky positioning as an alternative to affix

I have created a webpage for my thymeleaf-based Spring Boot project with various cards. Here is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</title> <meta charset="utf-8"> ...

htmlcssbootstrap-4

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

"Changing the location of the suffix icon in an ant datepicker: step-by-step

Is there a way to relocate the calendar icon without using flex-flow:row-reverse? I'm open to exploring alternative methods. ...

cssreactjsantdant-design-pro

The new additional formatting features I added to Bootstrap are causing issues with my layout

Originally, my code featured an image positioned on the right-hand side before I separated each H1 element into separate sections. Click here to see a picture of the page before the edit After separating the elements into divs, the image now sits on the t ...

htmlcssbootstrap-4

Ways to align multi-line text at the center within a concealed Division

Struggling with aligning a paragraph in a div vertically. The paragraphs are within sliding boxes triggered by hovering over an image. Unable to use display: inline-block due to the default state being set to display: none;. Seeking guidance on the best ap ...

htmlcssvertical-alignmentmultiline

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

javascriptjqueryhtmlcss

The issue of the onload function not being triggered in HTML when using jQuery Mobile

I am working with an index.html file that contains the following code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

javascriptjqueryhtmljquery-mobile

Utilizing Bootstrap 4 Grid to arrange four elements side by side, incorporating a personalized horizontal spacing between each

I've been experimenting with laying out 4 elements in a row while customizing the horizontal gutter. Initially, I tried placing each element within a col using the class col-md-2 for a specific screen size and adjusting the margin-right of each elemen ...

htmltwitter-bootstrapcssbootstrap-4bootstrap-grid

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

javascripthtmlregextags