Implementing CSS for displaying each item in a list on a new line

I am facing an issue where multiple li-a tags with varying text sizes are squished into one line. I want them to be displayed on separate lines, regardless of the length of the text. How can I achieve this?

<ul>
   <li><a>AAAA </a></li>
   <li><a>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB </a></li>
   <li><a>CCCCCCCCCCCCCCCCCCCCCCC</a></li>
   <li><a>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</a></li>
 </ul>

Desired Display:

AAAA                                                     
BBBBBBBBBBBBBBBBBBBBBBB                 
CCCCCCCCCCCCCCC                          
DDDDDDDDDDDDDDDDDDDD

Current Display:

AAAAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBCCCCCCCCCCCCCCCCCCCCCCCCCDDDDDDDDDDDDDDD

CSS

ul li a{
  line-height: 45px;   
  border: 1px solid #ff0000;
  margin-left:10px
}
css

Answer №1

By default, the li element is a block-level element and should work as such. However, if it's not working, you may have accidentally changed its display property to inline. To fix this, simply reset it by adding 'display:block' as shown below:

Add display:block to li element

ul li{
 display:block;
}

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

Populate a div with divs using automatic margins (CSS)

I know this question has probably been asked before, but I've searched high and low and can't seem to find an answer. It seems like my front-end skills are lacking when it comes to searching for solutions. Apologies in advance if this is a redun ...

csscss-floatcontainersmargin

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

javascriptcsshtml-tablecss-tables

Is there a way to display the dropdown menu specifically when I hover over the Search Engine option?

As I embarked on creating the inception of my potentially useful website, my focus shifted to crafting the header and menu sections. Specifically, in the search engine portion, I envisioned a dropdown menu with various options revealed upon hovering over " ...

htmlcss

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...

htmlcsstwitter-bootstrapfullcalendarfullcalendar-5

What steps should I take to ensure that my dropdown menu functions properly?

I am struggling to get my navigation bar with dropdown menus to function properly. I suspect there might be an issue with the CSS code. Can you take a look at it? Here is the HTML code snippet: /*---------------------NAVBAR-------------------*/ ...

htmlcss

What is the best way to add two hyperlinks within a single tab of a Bootstrap navigation menu?

I attempted to place two links in one tab, but I was unsuccessful. Here is my navbar code: <!DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scal ...

htmlcssbootstrap-5

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

htmlcss

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

Cascading Style Sheets displaying inconsistently between local environment and server

Is it just me or does anyone else experience CSS behaving differently on a remote EC2 server compared to a local server? When I load the page and inspect it, I notice that different CSS rules are being applied. I've already executed collectstatic and ...

htmlcssdjangoamazon-ec2

SASS: incorporating loops within CSS properties

Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...

csssass

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

In what way does a child's width vary when set to "100%" or "inherit" from its parent element?

Can a Child element, nested within a Parent, have a width that is different from the parent's width when: 1) the Child's Width is set to 100% 2) the Child's Width is set to 'inherit'? I am experiencing both scenarios. It is challe ...

css

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

cssangulartypescript

Discovering the CSS Selector Path for Selenium in C#

I recently started working with Selenium C# automation and have been having trouble finding the solution online. The HTML code that I am dealing with is as follows. My goal is to locate a specific element using CSS and click on it. It's worth noting t ...

c#cssselenium

Align elements horizontally

Currently, I am developing a blog application using React, Material UI, and Tailwindcss. One issue I am facing is that each postcard in the grid has a different height, and I want all cards to have the same height while keeping all children aligned in the ...

javascriptcssreactjsmaterial-uitailwind-css

Using HTML5, the <section> element can inherit styling from the

This is my first time building a website using HTML5 and I've come across a small problem. Here is the code snippet: <header></header> <section> <header></header> <article></article> <footer></foot ...

htmlcss

Create a CSS skeleton screen with invisible borders that do not reflect any visible outlines

I wanted to create a skeleton screen using CSS For reference, I used the link below: https://css-tricks.com/building-skeleton-screens-css-custom-properties/ However, when implementing it in my React app, I encountered an issue. Although I can see the HTML ...

javascripthtmlcssreactjsredux

Ways to split a div container into two columns, including a left side and a right side

I need to split the div into two columns where on the left side data should float: right; on the right side data should float: left; Sample Html code <div class="text-center"> <p class="Project_Analytics_Heading"> ...

cssangularhtml