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

Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

I am currently working on designing my personal portfolio using Bootstrap. I have made some progress with the setup, but I am encountering some issues. When I resize the window, the top menu collapses into a button. However, when I click on the button, n ...

htmlcsstwitter-bootstrap-3

Assistance needed with extracting specific information using Ajax and C#

I have developed an employee management website using .Net and ASP Entity Framework. On the main page, you can view a list of all employees with their names. However, clicking on a specific employee takes you to another page Profile/Index, where only deta ...

c#htmlasp.netajax

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

Tips for keeping a reading item in place while scrolling

To enhance the user experience, I would like to improve readability without affecting the scroll position. Question: Is there a way to fix the scrolling item at a specific position (item with the .active class)? I am looking to maintain a consistent read ...

javascriptjqueryhtml

Questions from beginners regarding the use of canvas elements with imported images, including concerns about caching and altering colors

I have a couple of beginner questions regarding the canvas element in HTML. Firstly, I was wondering if images imported into a canvas element are cached? Is this consistent across different browsers? Secondly, is it possible to import a black and white PN ...

htmlcanvas

What is the best way to implement material theme colors into my Angular2 CSS?

Suppose I want to utilize the mat-primary color as a background for a div using a CSS/SASS class, how should I reference it? My initial thought was: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; .my-class{ background-colo ...

cssangularsassangular-material2

What is the process for converting a URL or HTML document to a PDF using the html2pdf JavaScript library?

I am working on creating a button that utilizes the html2pdf library to convert an HTML page into a PDF. Instead of selecting an element with query selector or getElementById, I would like to pass a URL because the page I want to convert is not the same as ...

javascripthtmlhtml2pdf

Updating Select Options with Multiple Values using Javascript

My goal is to update the selected value of multiple select elements simultaneously using JavaScript. However, I am facing an issue where my script only updates one select element instead of all of them on the page. Unfortunately, I cannot modify the id att ...

javascriptjqueryhtml

Creating an Array in jQuery to Store Selected and Unselected Items

Looking for a way to collect all selected items from a form and save them in an array, as well as gather the non-selected elements and store them in a separate array. <select multiple id="conditionBad" name="conditionBad"> <option class=" ...

jqueryhtmljquery-selectors

The hyperlink is not functioning properly because of the CSS code

I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html However, I encountered an issue. When I click on <a href="1.html">Application 1</a> It doesn't redirect to 1.html as expected. The p ...

htmlcss

Can a JavaScript function spontaneously run without being called upon?

<a onclick="determineCountry(data)" class="installbtn">Install</a> My goal is to have the user redirected to one of three sites based on their location when they click the button above. However, there seems to be an issue with the script below ...

javascripthtmlgeolocation

Create a circle at the point where two table cells intersect in an HTML document

How can I create a circular shape at the intersections of HTML tables? I am struggling to figure out a way to incorporate shapes into HTML tables. My goal is to achieve a design similar to the image shown below. I have attempted using text and spans, as we ...

htmlcss

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

Tips for inserting a PHP variable into an SQL query

Here is the code I'm currently working on: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> < ...

phphtmlsqlforeachnavbar

Developing an IF statement in JavaScript that relies on hexadecimal color values

I've created a JavaScript code that changes the background color of my webpage every time it loads: document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16); To improve visibility, I am aiming t ...

javascripthtml

Ways to include text underneath icons using HTML and CSS

Seeking guidance on how to display text below icons on my website. Can someone please provide instructions? <div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%"> <a href="Dashboard"> <ion-icon name= ...

htmlcssresponsive

The Django template fails to implement CSS styling

I am trying to apply text-align: justify and reduce the text width on a Django template file, but it seems that my CSS isn't working for only this specific element. I have no idea how to solve this issue even though my static files and direction are f ...

htmlcssdjangodjango-templates

Activating development mode for LessCSS in Node.js

I'm encountering some major difficulties identifying LESS parse errors within a large CSS compilation. The error messages aren't providing much help (at least not for me). Here are my questions: 1. Is there a method to activate more debugging ...

cssdebuggingnode.jsless

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

javascripthtmlvideowebhtml5-video

Another option instead of using the .siblings() method would be

Is there an alternative to using the .siblings() method in jQuery for traversing through divs of a specific class in separate container divs? How can this be achieved with the following code: HTML: <div id="container1"> <div id="1"></di ...

jqueryhtml