List items that are not in any particular order spilling over onto the next

Having an issue with an unordered list where the list items aren't all on the same line. The 5th element is dropping to the next line even though each item is set to 20% of the container. The math adds up, so not sure what's causing the problem. Can anyone help?

Snippet of HTML

<div class="navi">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Get The<br>Facts</a></li>
        <li><a href="#">Professional<br>Education &amp; Resources</a></li>
        <li><a href="#">Understanding<br>Addiction</a></li>
        <li><a href="#">More About<br>The Blunt Truth</a></li>
    </ul>
</div>

CSS Code

.navi ul                                    { width:100%; }
.navi ul > li                               { background:#347311; width:20%; display:inline-block; }
.navi ul > li > a                           { font-size:20px; color: #f4f6cf; font-weight: 700; }
css

Answer №1

To get started, follow these steps: Include the following code in the css for ul.

display:flex;

Take a look at this interactive example

CSS:

.navi ul                                    { width:100%;display:flex; }  //adjustments made here
.navi ul > li                               { background:#347311; width:20%;display:inline-block;  }
.navi ul > li > a                           { font-size:20px; color: #f4f6cf; font-weight: 700; }

.

UPDATE:

If you've made updates, there's another method to consider. Take a look at this latest example.

Simply adjust the display property to see changes. For more information, refer to this helpful source.

Answer №2

To optimize your navigation menu, try setting the font size for .navi ul to 0px. This will eliminate any extra spacing caused by spaces between list items.

Don't worry about links, as they have their own font-size set and won't be affected by this change.

CSS:

.navi ul { width:100%; font-size:0px; }

I found this solution effective in improving the layout of the navigation menu. Feel free to check out my example on jsfiddle.

Answer №3

By including the property float:left; for the li elements, they are now properly aligned.

Answer №4

When using inline-block with LI tags, the issue arises due to the space between them. There are multiple solutions available for this problem. For more information, you can visit this css-tricks link

In my opinion, setting the font size of UL to 0 and then specifying the required font size for LI, along with adding word-break: break-all to the A tag would be the best approach.

.navi ul { width:100%; font-size:0px;}
.navi ul > li { background:#347311; width:20%; display:inline-block; font-size:20px;}
.navi ul > li > a { font-size:20px; color: #f4f6cf; font-weight: 700; word-break: break-all; font-size:20px;}
<div class="navi">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Get The<br>Facts</a></li>
        <li><a href="#">Professional<br>Education &amp; Resources</a></li>
        <li><a href="#">Understanding<br>Addiction</a></li>
        <li><a href="#">More About<br>The Blunt Truth</a></li>
    </ul>
</div>

I hope this explanation helps clarify things for you.

Answer №5

.navi ul            { width:100%; }
.navi ul li       { background:#347311; width:20%;float:left; display:inline-block; }
.navi ul li a  { font-size:20px; color: #f4f6cf; font-weight: 700; }

Give this a shot.

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

Apply CSS3 attributes in real time

The for loop I have is functioning properly: <div id="page1div"></div> <script> list = " "; for (var i = 0 ; i < length ; i++) { list = "<h1 class='entriesdisplayed'>" + item(i) + ...

jqueryhtmlcss

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...

htmlcsstwitter-bootstrap

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

javascriptjquerycsshtml

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Problem with applying ng-class directive in AngularJS

I am currently developing an application using AngularJs and Bootstrap. My goal is to display the title of a 'scenario' with different styling based on its status, along with a specific icon. Initially, I attempted the following approach: <s ...

htmlcssangularjstwitter-bootstrap

struggling to perfect the CSS styling

I am in need of a design similar to the image linked below: https://i.sstatic.net/Er1wT.png I attempted to create this layout using a table, but I have not been successful in aligning the side images properly. testTable.html <style> .container{ ...

htmlcss

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss

Center align text in the uib-progressbar

Is it possible to center align text in the uib-progressbar? I attempted using position:absolute, but I would like to display a list of progress bars in a UI grid that includes scrollable content. The goal is for the text to remain fixed while the progress ...

cssangular-directiveangular-bootstrap

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

cssangularsassnavigation

What is the best method for arranging various react components in sync?

I am striving to achieve a specific style. My current code looks like this: <Box display="flex" flexDirection="row" alignItems="center" width={1}> <Box flexGrow="1"> <Typography variant="h6 ...

cssreactjsmaterial-ui

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

javascriptjqueryhtmlcss

Adjusting label color when input is deactivated in a React application using TypeScript

Is there a way to change the label color in my view when the input is disabled using Typescript or CSS? This is the interface I am working with: interface image Here is the code snippet: <tr> <td className="name">Critère d&a ...

htmlcssreactjs

Material-ui v5's DataGrid now includes a new filter icon feature

The current default setting for the new DataGrid is to only display a filter icon when hovering over the column header with an applied filter. In contrast, the previous version had the icon visible at all times. For reference, you can view the Codesandbox ...

cssreactjsmaterial-uiemotioncss-in-js

What is the best way to define Bootstrap 5's CSS variables with the :root selector?

I am working with a Bootstrap 5 application that utilizes various web components, all styled with Bootstrap 5. I am looking to dynamically customize the theme within the parent component that integrates these web components. The basic structure of my setup ...

htmlcsstwitter-bootstrapbootstrap-5css-variables

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS. Interestingly, I faced no problems when using Bootstrap from a CDN. Addit ...

cssnpmvuejs2overridingbootstrap-5

Alignment of close button in modal for IE7 using Bootstrap

While using Bootstrap 2 modal, I encountered an issue with the close button not being placed correctly in IE7. Given the popularity of this CSS library, I am curious if anyone has found a solution to align it properly in IE7. It seems to be related to floa ...

csstwitter-bootstrapalignment