Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines.

https://i.stack.imgur.com/CcDeL.png

Code:

.Footer {
    width: 100%;
    display: inline-block;
    background-color: #d0d0d0;
    border-top: 20px solid #0092c2;
}

ul {
    width: 100%;
    list-style: none;
}

ul li {
    margin: 0 auto;
    float: left;
    width: 25%;
    font-weight: bold;
    text-align: center;
}

ul li ul {
    padding: 0;
}

ul li ul li {
    float: none;
    padding: 5px 0;
    font-weight: normal;
}
<div class="Footer">
    <ul>
        <li>Heading1
            <ul>
                <li>adfghjklhfds asasasasa</li>
                <li>sasasfdfdfdr asasasasfdfddsds</li>
            </ul>
        </li;

        <li>Heading2
            <ul>
            </ul>
        </li>

        <li>Heading3
            <ul>
                <li>wqwqwqwqww qwqwqwqwqwqwq</li>
                <li>dsdsdsdsd dsdsdsdsdswqw</li>
            </ul>
        </li>

        <li>Heading4
            <ul>
                <li>asasasasqwwq wqwqwqwqwqw</li>
            </ul>
        </li>
    </ul>
</div>
htmlcss

Answer №1

When styling the nested list items within a ul li element, use display:inline in the CSS.

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}

ul li ul li {
  float: none;
  padding: 5px 0;
  font-weight: normal;
 display:inline;
}
<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

Answer №2

Ensure text does not wrap in new line by using flexbox and possibly setting a min-width on each child element.

footer {
  width: 100%;
  display: flex;
  flex-direction: row wrap;
  justify-content: space-between;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

footer>div {
  display: flex;
  flex-direction: column;
}

footer>div>span {
  text-align: center;
}

footer>div>span:first-child {
  font-weight: bold;
}
<footer>
  <div>
    <span>Heading1</span>
    <span>adfghjklhfds asasasasa</span>
    <span>sasasfdfdfdr asasasasfdfddsds</span>
  </div>
  <div>
    <span>Heading2</span>
  </div>
  <div>
    <span>Heading3</span>
    <span>wqwqwqwqww qwqwqwqwqwqwq</span>
    <span>dsdsdsdsd dsdsdsdsdswqw</span>
  </div>
  <div>
    <span>Heading4</span>
    <span>asasasasqwwq wqwqwqwqwqw</span>
  </div>
</footer>

Answer №3

To fix the issue, you should adjust the width of the nested li elements. Currently, they are set at 25%, which is causing them to appear very small. Consider adding a box-shadow or background to visually identify their positions before making any width modifications to better understand why the text is wrapping quickly.

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}
ul li ul li {
  float: none;
  width:auto;/* ====== reset width here */
  padding: 5px 0;
  font-weight: normal;
}
<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</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 extract a table from a website that has stored the table data separately from the HTML?

Attempting to extract table data from the following URL: In a previous scraping attempt, the Python packages utilized were: from bs4 import BeautifulSoup import requests import mysql.connector import pandas as pd from sqlalchemy import create_engine Howe ...

pythonhtmlpandasbeautifulsouppython-requests

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: To target the checkbox, I added a class called .accept and defined it in the CSS file like this: ...

csscheckboxsapui5

jQuery: Automatically scroll to the end of the div based on the height of the content within

I have successfully developed a chat feature that is functioning perfectly. However, I am encountering an issue with making my div scroll to the bottom. The height of the div is calculated as calc(100% - 60px);. This particular div retrieves messages from ...

htmljquerycss

What is the best way to reference a div link from a different PHP file?

Struggling to access a page div from another php file, I've tried calling it using (found online) admin.php#changepass Here's an example of my HTML code: <div id="changepass" class="w3-container city" style="display:none"> <form name ...

javascriptphpjqueryhtmlcss

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

javascriptjqueryhtmlmodule-pattern

Tips for validating a form's input on an ajax page with the help of jQuery

I am facing an issue with a form containing two inputs. The first input can be validated before triggering an ajax function, but the second input cannot be validated. The second input is loaded from a page using ajax, along with the submit button. I need t ...

javascriptphpjqueryhtmlajax

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

htmlcsscodeigniter

Utilizing itemprop tag independent of itemtype declaration

My question is whether it's possible to use the itemprop attribute without using the itemtype. Can this be done? If so, how does using these attributes impact SEO? Is it recommended to always use itemtype? I assume it would be beneficial, but what if ...

htmlseomicrodata

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

html

Utilize CSS Steps to incorporate the initial position

I'm experimenting with CSS steps to create a unique visual effect resembling a "light board". The setup involves a column of 18 divs acting as individual "bulbs", with an animation that positions a div behind each one to simulate a "lit up bulb." The ...

css

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

iphonecssmobilemedia-queriesdevice

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

javascripthtml

Developers specializing in Google Maps navigate to a particular destination

I have been working on an app that provides users with the best options for places to visit, utilizing Google Maps technology. Here is what I have accomplished so far: Show the user their current location Show the user possible destinations (with marker ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

PHP - display the modified page with the updates applied

I currently have an HTML page where users can input information and submit a form to change database information. Typically, the submit button calls a PHP file on the server to process the data. However, I am looking for a way for this PHP file to return t ...

phphtml

What is the best way to choose all <pre> tags that have just one line of content?

$('pre:contains("\n")') will target all <pre> elements that have one or more newlines. Is there a way to specifically select <pre> tags with no newline or only one at the end? Any shortcuts available? match <pre>A< ...

jquerycss

Hover functionality for the border animation is disabled, but the SlideToggle feature is operating smoothly

I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...

jqueryhtmlcolorsjquery-animateborder

Having trouble with jQuery show/hide not functioning properly?

My website has a sub-menu section with a shopping cart icon. When a user hovers over the icon, it reveals a hidden cart section. The user can then move the mouse into the cart section to remove items. The problem I'm facing is that if a user displays ...

javascriptjqueryhtml

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

pythonhtmlseleniumweb-scrapingscreen-scraping

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

javascripthtmlangulartypescript