ensure all items in the list have consistent width

Looking to create a straightforward menu bar using the ul tag with 4 links. The ul spans 100% of the screen width, so each li element should be 25%.

I attempted to implement this, but the final list item ends up dropping to the next line. However, setting the width to 23% for each li fixes the issue. I wonder why 25% isn't sufficient?

Here is the link to my pen:

http://codepen.io/anon/pen/XKryKW Any assistance would be greatly appreciated! Thank you.

Answer №2

When using display: inline-block, there will always be a gap between blocks due to the default behavior. Additionally, adding 22px padding increases the total width beyond 100%. To resolve this issue, include box-sizing: border-box; in your CSS.

li {
  font-size:25px;
  padding: 22px;
  width:25%;
  text-align:center;
  float: left;
  display: block;
  box-sizing: border-box;
}`

https://jsfiddle.net/wietsedevries/kmzym3xL/

Answer №3

To start, the first step is to eliminate the padding on the right and left of the lis. Additionally, you should also include font-size:0 in the ul to prevent spacing between the lis.

*{
  
  margin:0;
  padding:0;
  
   
}
ul
{
  
  height:70px;
  background-color:#e1973d;
  list-style-type:none;
  width:100%;
  font-size:0;
}
li
{
 font-size:25px;
   padding: 22px 0;
  width:25%;
  text-align:center;
  display:inline-block
}
<ul>
  <li><a> first</a> </li>
 <li><a> second</a> </li>
   <li><a> third</a> </li>
     <li><a> fourth</a> </li>
</ul>

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

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

Issues with CSS and JavaScript functionality persist within the Flask framework

Having trouble with CSS and JavaScript on my website hosted via Flask framework on PythonAnywhere. Here is the directory structure: home/dubspher/mysite/ - README.md - app.py - index.html Static/ - css - fonts - images - js - sass Original HTM ...

Ensure text within list items is positioned properly and not obscured by any decorative elements

I'm struggling to create top-bottom borders for list items with customized decorations. The text of the element should not be hidden under the decoration even if it's too long. Any ideas on how to achieve this? div { width: 20%; } ul ...

Difficulties experienced when attempting to position content following the conversion from flash to html5

Before, I used a flash file within a tag to center it on my Wordpress Website. Now that I have converted it to html5 to serve content to Android browser users, I'm having trouble aligning the content in the center of the page for both Desktop and Andr ...

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

Ways to adjust the height of an element using the ::before selector in javascript

Within the realm of styling, there exists an element adorned with the .bg class. Its aesthetic instructions are described as follows: .bg { width:100%; } .bg:before { position: absolute; content: ''; background: rgba(0,0,0,0.5) ...

In order to have JavaScript showcase a random word from a list when a button is clicked and then display it in a heading 3, follow these steps:

How can I create a JavaScript function that displays a random word from a list when a button is clicked and prints it in a heading 3? I would appreciate a quick response. //Start of Js code let display = document.getElementById("motivato"); console.log(di ...

What is the best way to adjust the size of an image using CSS, especially with flexbox

I'm attempting to arrange 3 images in a row using flexbox. I also need to adjust the size of the first image because it is too large. However, my CSS styles are not being applied correctly. Each image is enclosed in its own div with a class of flex-it ...

How can I adjust the container to fit the monitor's dimensions while still keeping the

I am currently facing an issue on my website where the main content div has a fixed height, causing it not to scale vertically on larger monitors. I attempted setting the CSS properties for the div to 'auto' in order to allow it to adjust to the ...

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

What is the best way to synchronize Bootstrap styles across various HTML files?

Currently, I am part of a group project in school where I am just beginning to learn about html, css, and bootstrap. Each of us has been tasked with creating individual html files to represent web pages for our website, and then we will apply css styles t ...

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! https://i.sstatic.net/OtO6O.jp ...

Tips for Shifting Rows to the Right in Bootstrap 5

I need to adjust the layout of my page so that there are 2 rows on the left, a button in the center, and 2 rows on the right. I will include an image and the source code below! View Project Image Here is my source code using Bootstrap 5: function Convert ...

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...