What is the best way to format each <li> element onto a separate line?

Creating a review section for an item on my website required me to organize the reviews and comments. I utilized the following code structure:

<ul>
 <li>
 Comment code
 </li>
 <li>
 Comment code
 </li>
</ul>

Within the li items, there are nested divs. Everything looks good now that I have set up the comments section as desired.

The issue I am facing is that the comments (li items) appear in line with each other. I attempted to address this with the following CSS:

.review_bottom li{
    list-style: none;
    display: block;
}

However, this did not result in the desired change. Using br tags could solve the problem, but they may not work effectively across both PCs and phones. Any suggestions for resolving this?

htmlcss

Answer №1

To solve this issue, a line break should be added after each item in the list.

.review_bottom li {
  list-style: none;
}
.review_bottom li:after {
  content: "\A";
  white-space: pre;
}
<ul class="review_bottom">
  <li>
    Add comment here
  </li>
  <li>
    Add comment here
  </li>
</ul>

Answer №2

To make your list display properly, be sure to assign your class to the list like this: 

.review_bottom {
margin: 0;
padding :0;
list-style: none;
}

.review_bottom li {
float: left; 
display: inline-block;
}
<ul class="review_bottom">
<li>
Comment code
</li>
<li>
Comment code
</li>
</ul>

Answer №3

<ul>
 <li>
 Add your comments here
 </li><br>
 <li>
 Add more comments as needed
 </li><br>
</ul>

This should cover all the necessary HTML code.

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

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui

Transferring intricate data gracefully through the URL

I'm considering using something along the lines of: <script src="http://www.example.com/?key={'param':'value'}"> As illustrated in the example above, a JSON formatted string is being passed through the src URL. However, thi ...

htmljsondata-structuresstandards

Is it possible to use basic HTML for creating views within the Express framework?

I recently began using node.js in conjunction with the Express framework, but I'm finding it challenging to remove Jade and other templates from my project. I prefer writing my views in plain HTML. Can anyone provide guidance on how to achieve this? ...

htmltemplatesnode.jsexpresspug

Aligning a sprite at the center of a div background

My button has a unique design where it consists of a sprite set as the background image of a div. The sprite sheet is laid out horizontally, and I have also scaled down the source image to fit the div. .button { background: url(sprite.png); backgr ...

cssspritecss-spritessprite-sheet

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui

Manipulate the label content of the last child using Javascript

On my BigCommerce website, I am trying to change the label text of a variable using a JavaScript function since the support team is unable to assist with this. Below is the code snippet that needs modification: <dd class="GiftCertificateThemeList" st ...

javascriptjqueryhtmlforms

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

javascriptjqueryhtmlcss

Is it possible to validate the fields on an HTML page that does not include a form tag using jQuery?

Below is a code snippet from my HTML page. Is it possible to validate the two specified text fields using jQuery without using any form tag in my HTML page? <div id="panel1"> <fieldset id="fieldset1"> <legend>Registration Details:</ ...

jqueryhtmljquery-selectorsjquery-validate

When the onLeave event of fullPage.js is activated

I am struggling to implement two CSS events when transitioning between sections on a fullPage.js application. To see my current progress, you can view the following fiddle: http://jsfiddle.net/pingo_/67oe1jvn/2/ My objectives are as follows: To modify t ...

jquerycssfullpage.js

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been su ...

javascripthtmlcssmaterial-uiplaceholder

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

javascriptjqueryhtmlcssajax

including a code snippet within a dropdown menu or embedding it in a clickable button

Hey there, my name is Wouter Sanders and I am currently learning to code! I recently finished creating a RAL color picker for a project I'm working on. The only issue I've run into is trying to embed the code in a menu or button so that it doesn ...

javascriptjqueryhtmlcss

Looking for a way to exclude both parents and children from a list of relatives? Want to ensure that the

I've been struggling to align these list elements with their counterparts, but they seem to automatically create a margin for their child elements. It is essential for these list items to maintain the position:relative attribute so that the #dropdown ...

csslistdrop-down-menuheight

Elements that possess identical class attributes yet exhibit dynamic behavior

I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the u ...

javascriptjqueryhtmlcss

What are the steps for implementing timezone-js?

I found a project on GitHub that claims to convert one timezone to another. I've been trying to get it to work without success. After downloading and extracting the files, I created an HTML file with the following code: <html xmlns="http://www.w3. ...

javascripthtml

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

javascriptcsshtmljquery-selectorsbackground-image

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts