CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS.

Here's the code snippet in question:

.nav li {
 margin: auto;
 display: inline-block;
 color: white;
 padding: 10px;
 font: Times;
 text-align:center;
 float: inherit;
 }

.nav a {
text-decoration: none;
color: white;
display: inline-block;
padding: inherit;
}

Upon viewing the attached picture, it is evident that the button does not completely fill the navigation bar.

Click here to view the image (apologies for poor quality).

Could someone provide guidance on how to rectify this issue?

htmlcsshtml-listsnav

Answer №1

.nav li previously had padding, but it has been removed and now the padding has been applied to the anchor elements instead.

.nav li{
padding:0
}

.nav li a{
padding:10px;
}

I trust this solution will be beneficial for you.

Answer №2

This could be because the li items have padding.

.nav li {
 margin: auto;
 display: inline-block;
 color: white;
 padding: 10px; // located here
 font: Times;
 text-align:center;
 float: inherit;
}

Try taking out the padding from li and instead apply it to a.

Answer №3

Check out this demo that should function properly.

Just a heads up: The colors are solely for testing purposes and the key is to utilize either :hover or :active on the <li> element.

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

Responsive Image Resizing with Bootstrap for Smaller Screens

I'm struggling to resize a responsive image in Bootstrap using the carousel example on their official website. <div class="container"> <div class="other-div"> .... </div> <div id="carouselExampleCon ...

csstwitter-bootstraptwitter-bootstrap-4

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Seeking a material design template for mandatory form patterns

I'm struggling with getting my required field patterns to work using regular expressions. Additionally, I'd like to center my 'onboard' button on the page. You can find my code at this StackBlitz link: https://stackblitz.com/edit/angula ...

htmlregexangularmaterial-design

What is the best way to transfer table values to a modal in Django?

I am looking to transfer all the values from the specific row to the modal when the edit option is selected in the project. How can I achieve this? Here is the table body code: <tbody class="list form-check-all"> ...

pythonhtmldjangoinheritance

Mobile devices do not support HTML5 Video playback

Here is the HTML5 Video code I am using: <div id="lightBox1" class="lightBox"> <video id="video" controls preload="metadata"> <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.mp4" type="video/mp4"> ...

javascriptjqueryhtmlvideo

PhoneGap redirect page feature

When using PhoneGap, I have encountered an issue with opening internal links. Despite using the href tag in my HTML, I am unable to load the webpage. Can someone please advise on how to properly redirect from one HTML page to another within PhoneGap? ...

iphoneioshtmlcordova

Convert an HTML webpage into a JSON format that represents the structure of the DOM tree

I am having an index.html file with multiple div tags inside it. I am attempting to retrieve content from all the div tags on the page, but currently, I am only able to fetch the content from the first div tag. What I actually need is the content from all ...

phphtmljsondomhtml-parsing

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3

Make Jekyll process HTML files even without front matter by using the Knitr tool to add front matter to the HTML files

I am currently utilizing RMarkdown in combination with knitr to produce various HTML documents. After uploading these documents to GitHub, Jekyll is utilized for rendering the files onto GitHub pages. My objective is straightforward: I want the index.html ...

htmlr-markdownjekyllknitr

Difficulty integrating custom CSS with Bootstrap framework

I attempted to incorporate a custom CSS file with my Bootstrap code, but unfortunately it does not seem to be functioning properly. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcssbootstrap-5

Codeception is unable to interact with an element that it recently encountered

Greetings to the wonderful users of Stackoverflow, Currently, I am in the process of creating acceptance tests using Codeception with Selenium as the WebDriver module. I have encountered an issue while trying to verify the existence and functionality of o ...

htmlseleniumcodeceptionacceptance-testing

Delete the line height (or leading) for bigger text in CSS

Is there a way to eliminate the space above and below the mandatory span, specifically when using << within it? The height of the field row is determined by the default line-height for the text size, but the mandatory field is taller due to its larg ...

htmlcss

Employing the HTML element `<input type="slider">`

It's clear that the <input type="slider"> element is not part of the spec, but I'm interested in using it as a placeholder or identifier for a plugin I'm working on. This plugin will actually swap out the <input> with a series o ...

jqueryhtmlpluginssemantics

transmit static information using a form

I'm currently working on sending data from one page of my website to another. It seems like using an HTML form with the action attribute set to the destination would be the way to go. <form method="POST" action="/destination"> <input ty ...

phphtmlforms

The HR tag does not display anything following the mailing

Struggling to design a newsletter template with different lines for each product using the HR tag. However, none of my attempts with divs, tables, or CSS properties have been successful. The template looks fine in Chrome, but when sent to the provider, th ...

htmlcsstemplates

Modify the td attributes while retaining the extracted data values from the website

I'm currently utilizing this code to extract data from another website: $searchURL = "http://www.anotherwebsite.com"; $html = file_get_contents($searchURL); $patternform = '/(<tbody.*<\/tbody>)/sm'; preg_match_all($patternfor ...

javascriptphphtmlregex

The Navbar Button is having trouble with vertical alignment

I've been experimenting with Bootstrap to customize a navbar to my liking. I'm having trouble getting everything vertically centered properly in this menu, as you can see in my code. I've made some okay adjustments by tweaking the margin, bu ...

htmlcsstwitter-bootstrap

Obtain the length of a sound file in .wav format

Can anyone suggest a way to incorporate a waveform or horizontal bar on a website that displays the duration of a WAV file in seconds using HTML text? For instance, for a 60-second WAV file: I'm open to any ideas. ...

jqueryhtmlweb-applicationsjquery-pluginshtml5-audio

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

javascripthtmlangulartypescript

Tips for focalizing multiple highlighted lines within a contenteditable div using jQuery

When attempting to apply the code below to change the margin-bottom of multiple selected lines, only the last selected line is affected. The other lines are simply wrapped in a p tag without applying the style change. It seems that I am unable to focus on ...

jqueryhtmlcontenteditableexeccommand