What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/

I have looked at some similar questions on the website and tried adding:

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

However, this solution has not worked for me. The javascript function I am using works fine, so I am unsure why it is not working in jsfiddle. Can anyone help me solve this issue?

Thank you!

htmlcss

Answer №1

Implement flexbox in your layout to make the children automatically fill up the available space.

Check out this example on JSFiddle

#tabs_header ul {
    display: flexbox;
}

#tabs_header li {
    flex: 1 1 auto;
}

Answer №2

To optimize the display of elements as table-cell, it is advisable to remove the float: left. This can eliminate unnecessary declarations as floated elements tend to shrinkwrap their contents.

Answer №3

Eliminate the float: left; style from the list items:

#tabs_header li {
    float: left;
}

fiddle3, fiddle4 - a functional code snippet (using jQuery)

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 steps can I take to modify my webpage, like a dashboard, on the internet?

Whenever I click on a menu item in the sidebar of my HTML file, I want only the body section to change without affecting the navigation or sidebar content. For instance, if I select the "Coding Convention" menu in the sidebar, I would like the page to swi ...

javascriptjqueryhtmlajaxweb

The JQuery sidebar smoothly transitions in after the menu button is pressed

I have been attempting to utilize the animate function in JQuery to make a sidebar menu slide in from the left after clicking a menu button. Despite searching through various resources, such as Stack Overflow, I am still unable to get it to work properly ...

jqueryhtml

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

Ways to tally elements that have been dynamically loaded onto the webpage through AJAX requests

My page has a dynamic region that is continuously updated using jQuery's .ajax and .load methods. In order to submit the form, there need to be at least 3 of these 'regions', so I have to keep track of the number of DIVs with a specific cla ...

javascriptjqueryhtmlajax

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

What happens to the content in a browser when the window is minimized?

The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window. I prefer the content not to collapse. I have utilized a div that resembles a text ...

jqueryhtmlcssbrowseruser-interface

The method for organizing boxes on the stack exchange website's list page

I can't help but wonder about a unique and innovative feature on this stackexchange page that showcases all the stackexchange sites in a grid layout. Upon clicking on a site box, it expands in size while the surrounding boxes adjust their positions t ...

javascriptalgorithmhtmlstackexchange

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...

jquerycssimage-resizingfluid-layoutfluid

Is it possible to display a subtle grey suggestion within an HTML input field using only CSS?

Have you ever noticed those text input boxes on websites where a grey label is displayed inside the box, but disappears once you start typing? This page has one too: the "Title" field works the same way. Now, let's address some questions: Is ther ...

javascripthtmlcsstextboxlabel

"Enhancing the speed of the JavaScript translate function when triggered by a scroll

I am facing an issue with setting transform: translateY(); based on the scroll event value. Essentially, when the scroll event is triggered, #moveme disappears. For a live demonstration, please check out this fiddle: https://jsfiddle.net/bo6e0wet/1/ Bel ...

javascripthtml

Incorporate a class into a link within the wp_list_pages function

I've been experimenting with creating a hover effect on list items using the wp_list_pages() function in my Wordpress theme. Despite my efforts, I've hit a roadblock in getting the hover effect to work properly. As a beginner in web development, ...

phphtmlcsswordpress

Animate failed due to the appending and adding of class

$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...

javascriptjquerycssanimationanimate.css

The text becomes jumbled and messy when the browser is resized

I came across this fantastic header design > https://codepen.io/rm/pen/ldhon <. However, I noticed that when the window is resized, the text ends up overlapping. In the demo provided, resizing the window too much causes the issue to become apparent, ...

htmlcss

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

jqueryhtmlcss

Browser behavior for animating background-position varies

check out this interactive demo - The objective is to create a unique perspective effect while scrolling, specifically on the background. The effect functions properly on Chrome and IE7, IE8 versions; however: Issues arise with IE9, where the background ...

jquerycsscross-browser

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

The PHP script to modify a MySQL database fails to make any updates

I am having an issue with my code for updating a MySQL database. The code runs without errors, but when I check the records in phpMyAdmin, the database is not being updated. Can someone please assist me with this? $database = "carzilla"; $con = mysql_c ...

phpmysqlhtml