Is there a way to prevent text inside list elements with a flex value of 1 from wrapping onto a new line?

When dealing with long words that break to a new line, adjusting the font size can lead to text being too small. Consider targeting elements with longer words and applying flex: 2, but be aware this may impact symmetry.

.wrapper {
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
.navigation {
    height: 55px;
    width: 100%;
}
.navUl {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}
.navUl li {
    flex: 1;
    margin-right: 10px;
}
<div class="navigation">
    <div class="wrapper">
        <ul class='navUl'>
            <li>HOME</li>
            <li>ÜBER UNS</li>
            <li>UNSERE LEISTUNGEN</li>
            <li>PREISZUSAMMENSETZUNG</li>
            <li>NÜTZLICHES</li>
            <li>GALERIE</li>
            <li>VIDEOS</li>
            <li>BAUMSCHUTZGESETZ</li>
        </ul>
    </div>
</div>
htmlcssflexbox

Answer №1

After reviewing your situation, it appears that the size limit set for .wrapper(960px) is too small to accommodate all the items in your list on a single line. You could try using white-space:nowrap, but this may disrupt the symmetry and cause the list to overflow the wrapper.

A better solution would be to adjust the width of the .wrapper (around 1500px should suffice), or accept that the items may break onto two lines.

.wrapper {
    width: 1500px;
    height: 100%;
    margin: 0 auto;
}
.navigation {
    height: 55px;
    width: 100%;
}
.navUl {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}
.navUl li {
    flex: 1;
    margin-right: 10px;
}
<div class="navigation">
    <div class="wrapper">
        <ul class='navUl'>
            <li>HOME</li>
            <li>ÜBER UNS</li>
            <li>UNSERE LEISTUNGEN</li>
            <li>PREISZUSAMMENSETZUNG</li>
            <li>NÜTZLICHES</li>
            <li>GALERIE</li>
            <li>VIDEOS</li>
            <li>BAUMSCHUTZGESETZ</li>
        </ul>
    </div>
</div>

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 is the best way to showcase a MySQL table using PHP?

I am a beginner in mysql and I have been trying to display my database using PHP. Despite following a tutorial, I'm unable to find any errors but the data isn't showing up. Can someone provide assistance? Thanks The server's name is "sql30 ...

phphtmlmysqlsqldatabase

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

htmlcsstwitter-bootstrap

Is it possible to submit form elements within a table using an ajax request?

My scenario involves a table that is generated dynamically and contains an edit and delete button in each row. When a user modifies the content of inputs, checkboxes, or textareas within a specific row and clicks on the edit button, I need to send this d ...

javascriptphpjqueryhtmlajax

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan

The loading speed is being impacted by the jQuery in the <head> section and <scripts> in my code

My website includes Slick JS on the index page and Colcade on another page. Before launching my site, I want to ensure that the loading times are optimized. Can someone review the order of appearance for these scripts and confirm if it's correct? Than ...

javascripthtmljqueryslick.jsjquery-masonry

How to ensure MUI DataGrid fills the vertical space without any overflow issues

Trying to implement a MUI DataGrid within a Flexbox layout that fills the remaining space precisely can be quite challenging. Imagine a setup like this: --------------------------- | Header | --------------------------- | Table Header ...

cssmaterial-uiflexboxmui-x-data-grid

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

htmlcssscrollflexbox

What is the button description when it is hovered over?

I implemented a menu feature where hovering over a button displays its description in a DIV. The descriptions are stored in the 'data-desc' attribute of each button. <ul id="menu"> <li><a href="page" data-desc="Page descriptio ...

jqueryhtml

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

javascriptandroidhtmlwebview

Refreshing the page causes the HTML input to be cleared

My dilemma involves a javascript function that stores the value entered in an <input> field to a cookie, followed by a page refresh. The purpose of the refresh is to allow the server side to re-render the page using the cookie values. My concern is ...

javascripthtml

Two flex boxes displayed next to each other on the screen

Within the .maroon section, there are two .whitewrap sections. I am puzzled as to why they are not wrapping onto another line and instead displaying side by side. The form should be positioned below the text and graphic with some maroon showing in between. ...

htmlcssflexboxword-wrap

Implementing Vuejs 2: The guide to dynamically loading and executing a script tag javascript file within the DOM

I am currently working with Vuejs and facing the challenge of dynamically inserting script tags into the DOM to embed JWPlayer videos like this: <body> <!-- HTML content --> <script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33. ...

htmlajaxvue.jsvuejs2jwplayer

What is the best way to reset an event back to its original state once it has been clicked on again

As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to ...

javascriptcssfrontend

Enhance Bootstrap: adjust button width based on fluid text width

Incorporating Bootstrap 5 framework, I have designed a card that showcases brand information along with a navigation button on the right side. https://i.sstatic.net/25QVr.png When the description is brief, the button aligns perfectly in a single line. Ho ...

csstwitter-bootstrapflexboxbootstrap-5

The hover animation is not functioning properly in Icomoon

I have implemented a menu with a CSS3 hover animation called toTopFromBottom. Now, I want to replace the Font Awesome icons with Icomoon icons and apply the same animation effect: HTML: <div id="top-bar" class="top-bar"> <div class="container" ...

htmlcssbootstrap-4css-transitions

Discovering a collection of class elements with particular text in Selenium IDE

My objective is to verify that the correct title, summary, and link are displayed in search results. In the scenario below, I aim to ensure that one of the listings includes the title "Title for Beta," a summary with the content "Summary for Beta," and a ...

cssxpathseleniumselenium-ide

Generating and filling input radio buttons dynamically using PHP

Currently immersed in the world of PHP and HTML, I am in the process of creating a multiple-choice exam. Within my PHP file are four arrays: one for questions, one for answers to option "a)", another for answers to option "b)", and the final one for answer ...

phphtmlloops

Mastering the skill of clicking on label element text

Here is the code snippet that I'm working with: <ul class="sb_dropdown" style="display: none;"> <li id="sb_up_arrow" class="uiebatesca"/> <li> <label data-search-for="all"> <strong>All</strong> </labe ...

javahtmlwebdriver

What's the most efficient way to iterate through this Array and display its contents in HTML?

I'm struggling to sort a simple array and I think the issue might be related to the time format. I'm not sure how to reference it or how I can properly sort the time in this array format for future sorting. //function defined to input values ...

javascripthtmlarraysloops

Adjusting content alignment for mobile devices and centering on desktop screens

I am currently working on creating a responsive website and I have a specific layout in mind. I want to center some text and an image both vertically and horizontally within a div that has a minimum height, leaving plenty of blank space above and below the ...

htmlcsstwitter-bootstrapbootstrap-5