Extra spaces found at the end of the last <li> element

After the li tags in my unordered list, there is an aggravating space that I cannot seem to fix - take a look at the jsfiddle

I have attempted various solutions, including floating the anchor tag, but nothing has worked. My expectation was for the three li elements to occupy the entire width of the list, yet there seems to be some additional space after the last one.

I am utilizing percentage widths to determine the size of the list items, in case that information is relevant

This issue is present in Chrome and FF on Lubuntu

htmlcsshtml-lists

Answer №1

I believe the cause is width: 32%;

attempt 

li:last-child{   margin-right: 0; float:right}

Answer №2

The issue is related to the percentage widths being used. Try resizing your browser window, and you'll notice that the excessive space decreases or vanishes entirely.

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

Triggering a sweet alert on a mouse click

Here is a code snippet I found on . It shows an alert box that doesn't disappear when clicked outside of it. swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, ...

javascriptjqueryhtmlsweetalert

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

After the page loads, the Facebook Like button causes my website content to shift downwards by 1 pixel

Why does the like button push down my website content by 1 pixel after loading? Any ideas on what might be causing this issue? Check out the website: See the problem in action here: ...

htmlcssfacebook

Returning to two ancestors with jQuery

Hello everyone, I'm attempting to locate the following tag: <tr class="grid-layout-row"> within this block of HTML: <tr class="grid-layout-row"> <td role="presentation" class="grid-layout-row-leader"> <div class="gr ...

javascriptjqueryhtml

My table is only recording the last row when I add an onclick function to each row

I have a table in my html file with 3 rows. I am attempting to dynamically add the onclick method to each row during the window's onload event, which should display an alert with the clicked row index. However, no matter where I click, it always retur ...

javascripthtmlbootstrap-4

The view has no access to $scope but the controller does

I need to display the iso code using a $scope when selecting a country from a list. The list of countries is fetched through a $http call in a factory and then stored in a scope. ///////// get countries //////////////// tableFactory.getCountries().then(f ...

javascripthtmlangularjs

Error encountered while attempting to insert YouTube video with video.js player using an iFrame

I'm currently using video.js along with the vjs.youtube.js plugin to incorporate YouTube videos directly into the video.js player on my website. Everything is working smoothly and I am able to dynamically add videos to the page. However, I've en ...

htmliframevideohtml5-videovideo.js

I am eager to demonstrate the utilization of AngularJS in displaying hierarchical table rows

I am facing an issue with the code I wrote to display a tree-structured table. It's not working as expected and I need some assistance. The goal is to show only rows in a tree structure, not the entire table inside a table row. <script type="text/ ...

htmlangularjs

How to extract data-bound value from a <span> element using Angular

I have a table that serves as a form, with most of the cells containing input fields. <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td> <td><input id="testingInput2" type=" ...

javascripthtmlangularjs

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

I am facing an issue with my <header> and <nav> blocks which are impacted by JavaScript. Is there a way to create a JavaScript solution similar to a media query that would deactivate this JavaScript code if the window width is less than or equa ...

javascriptjqueryhtmlcss

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

javascripthtmlajax

Styling with CSS to show an image and text on the same line

I would like to show text and image on the same line, with the image slightly above the text. View Demo html img.del { display: inline-block; float: right; cursor: pointer; margin-right: 74% } .astext { text-align: left; margin-le ...

htmlcss

A more sophisticated approach to button creation, such as utilizing a single HTML element

Trying to find a sleeker way to create the following HTML button. https://i.sstatic.net/Eanuy.png Currently using an <a href="..."> with 2 child <span> elements like this: - <a href=""> <span class="box_button">Read more</ ...

htmlcss

Toggle class on a span element within an anchor tag

I've been experimenting with different approaches, but I just can't seem to figure out how to make this work. How do I change the class of the span inside an < a > tag within an < li > to "active," and then remove it when another < ...

jqueryclickadditionhtml

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

javascripthtmlcss

How Can I Utilize a URL Parameter Twice to Execute SQL Queries in Two asp.DataLists on a Single Page?

I've been trying everything, but I just can't seem to get one query to function properly. My goal is to retrieve information from the SQL Server database in two separate queries - one for album names (based on URL parameter) and another for song ...

c#htmlsql-serverselect

news feed front-end - Django/HTML

I'm currently working on a social networking website with Django and HTML. On my blog list page, I have all the posts from various users displayed in a single container. But I want to separate these posts into individual tiles or containers, similar t ...

htmlcssdjango

Tips for arranging columns and rows in a mat-dialog box

In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the hori ...

cssangularlayoutangular-material

Place the sidebar component within a container div

I have a component called app-side-menu that I want to place inside a blue rectangle, taking up the full height of the blue div https://i.sstatic.net/OJGVV.png. The issue is that the menu extends beyond the bottom limits of the blue div and moves along wit ...

cssangularbootstrap-4

Gulp fails to generate a CSS file after compiling Sass to CSS

Recently, I've been having trouble compiling my sass file to css. Even though it was working fine before and I haven't made any changes, now my CSS file is empty. Below is the task I am trying to accomplish: gulp.task('sass', function ...

csssasscompilationgulp