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

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

Header, footer, and sidebars are all locked in place, while the central content area is designed for

Using this Demo Template as a starting point, I am looking to create a new layout: However, I am encountering the following challenges: The two sidebars are not properly contained within the scrollable content div. The content div does not have a fixed ...

htmlcss

When viewed through the Firefox browser on an Android device, the text on the webpage suddenly enlarg

I currently have the following content displayed on my website: <div style="font-size: 11px; line-height: 17px; text-align: left;"> <p>lorem ipsum etc etc</p> </div> Strangely, despite setting the font size to 11px, the te ...

androidhtmlcssfirefox

Elevate your website with a mesmerizing CSS effect: watch

I am trying to achieve a CSS3 effect where an image slides up when hovered over, similar to this. I came across this example, but I do not want to use the box's background property. <div class="box"> <img src=image/image.jpg> & ...

css

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss

I am attempting to add a new row (div) for the invoice, but when I do so, the

Looking for a solution to repeat a row when clicking a button in order to utilize PHP for data manipulation? Check out the code snippet below: <!-- Table row --> <br><br> <div class="row"> <!--Product Table--> <div ...

javascriptjqueryhtml

When using jquery.hide() and show(), the content within the div disappears momentarily before reappearing

Hello! I am experiencing an issue where the content of my div disappears after using a jQuery hide() and show() function. It seems to be gone. <li class="gg3"><a class="link" href="#" data-rel="content3">Link1</a></li> <div clas ...

javascriptjqueryhtml

Learn how to activate a JS native event listener using jQuery for the 'change' event

This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...

javascriptjqueryhtmladdeventlistener

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

How can the parent div be made transparent without affecting the child div's visibility?

When applying opacity to a parent div, I noticed that it also affects the child div. My intention is to only apply opacity to the parent div. I have set up separate divs for this purpose. <div id="container" style={{backgroundImage:"url('/images ...

htmlcssjsx

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Tips for creating a section that perfectly stretches to cover the entire view port in HTML

After browsing through this website, I was inspired by its design and wanted to replicate something similar. The unique approach they took to ensure each section fits 100% of the viewport caught my eye. They utilized a "div section-background" within each ...

htmlcssbackgroundviewport

Problems with select tag change events

I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to re ...

javascriptjqueryhtmlcss

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows b ...

cssflexbox

Can a relative link with parameters but no path be used?

Can I omit the path from an href tag and begin with a question mark instead? For instance, if my website is https://example.com/mycgi, would it be acceptable to have a link like this: <a href="?foo=bar">bar</a>? I tested this on Fir ...

html

If the cursor hovers over an image, the onmouseover function does not work properly

Currently, I am developing a PHP page to display data from a database in a tabular format. Each column in the table represents an 'ATC Station'. When active, additional data is displayed upon hovering over the cell. Everything was running smooth ...

javascriptphphtmlevents

Height Miscalculation: Chrome and FF encounter window dimension

There is a large application with numerous pages. When I use the console to execute console.log($(window).height()) on any page within the application, it returns the expected result: the height of the window, not the document. For instance: $(window).he ...

javascripthtmlcssgoogle-chromeprimefaces

Triggering the 'Next' function with a key press event

Currently, I am utilizing the following code to manage the keydown event for the tab and enter keys within an input field. $(document).on('keydown', ".className" , function(e) { var keyCode = e.keyCode || e.which; alert(keyCode) / ...

htmljqueryeventsandroid-softkeyboardkeydown