Divide the text: send a few to the left and the rest to the right

Looking for a way to split text in list elements? You can use the following code:

|Foo..............Bar|

Where | represents the element boundary, and . indicates white space. The code snippet is as follows:

<li><span class="left">Foo</span><span class="right">Bar</span></li>

However, if you're facing alignment issues with this approach, simply adding position: relative; right: 1px; or float: right; to .right won't solve the problem.

UPDATE: text-align didn't work either.

UPDATE 2: To clarify, the goal is to align some text to the left and some to the right side of the element.

htmlcss

Answer №1

Here is a suggestion to achieve the desired result:

For HTML:

<li><span class="left">Foo</span><span class="right">Bar</span></li>

And for CSS:

.left{
    float:left;
}

.right{
    float:right;
}

li
{
    list-style-type:none;
    width: 50%;
}

You can adjust the space between Foo and Bar by changing the width percentage as needed.

Check out this DEMO for a visual representation.

Answer №2

Styling with CSS

This code snippet ensures that the list items (li) take up the full width of the screen.

li
{
    display: block;
    width: 100%;
}

The classes .left and .right are floated to the left and right respectively.

.left
{
    float: left
}

.right
{
    float: right;
}


Lastly, use the following code:

li:after
{
    content: '';
    clear: both;
}

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

Responsive Bootstrap column with a fixed-width card

My Bootstrap-card is currently not adjusting its width properly. I want the card to occupy the full width of the column it's in. Below is a snippet of my code and a screenshot showing the current width along with the desired width indicated by a blue ...

cssbootstrap-4bootstrap-cards

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

What is the best method for utilizing an autocomplete plugin to update a div element?

I am seeking assistance regarding implementing an autocomplete feature in a DIV that displays the names, images and ages of other users as they are typed into a field positioned above the DIV. I want this autocomplete functionality to mimic Facebook' ...

htmlajaxjquery-uijquery

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

cssangulartypescript

Do browsers load from top to bottom or bottom to top?

I once heard conflicting information about whether a browser loads from top to bottom or from bottom to top. Another question was raised about whether a CSS file reads from the bottom to the top. I found myself wondering when someone asked me this ques ...

htmlcssbrowser

What is the correct way to add "itemCondition" and "logo" schema tags to schema.org product snippets?

I'm in the process of enhancing my product page with schema.org snippets. My client has specifically requested the inclusion of certain schema.org tags on the product's individual page. 1) itemCondition 2) logo (displaying only the brand image ...

htmlschema.orgrich-snippets

CSS: Is there a way to create a square div that is always the same size as the smallest dimension of its parent container?

Check out this codepen that showcases my issue: http://codepen.io/anon/pen/xwQpLy?editors=110 I've been using a little trick to maintain a 1:1 ratio for the box: .squarebox { position: relative; width: 100%; } .squarebox::before { padding-bo ...

css

Having difficulty defining the dropdown boundary in Bootstrap 5

Previously, I had this code working perfectly in Bootstrap 4. <div class="dropdown"> <span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport"> <img src ...

htmlcsstwitter-bootstrapbootstrap-5

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

Is there a way to obtain the Base64 data following the conversion of a div to an image?

I am not very experienced with JavaScript, but I wanted to convert a div to an image. I came across this helpful jsfiddle that showed me how to do it. $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { on ...

javascriptjqueryhtmlcanvaspng

Confirming the information in two sections of a form

Could someone assist me with validating my form? Specifically, I need help ensuring that the house number field only accepts two numbers and the postcode field only allows 5 characters. I have implemented a pattern attribute for validation and I am curiou ...

javascripthtmlformsvalidation

Facebook Login issue occurs in IOS HTML5 app when attempting to log in from the 'Add to Home' screen

For a website with a mobile version, I have integrated code that allows users with Facebook to register without filling out a form. If the user meets any of the following conditions, everything works smoothly: Uses any desktop browser Uses any mobile bro ...

phpiosfacebookhtml

Combining CSS and JS files for accordion list - experiencing issues when used separately

Recently, I've been trying to create an accordion list and stumbled upon some code (HTML, CSS, and JS) on www.w3schools.com. When I have the code all in one document and run it as a single .html file, everything works perfectly. However, when I split ...

cssjavascripthtml

The onclick event for a Bootstrap .btn-group checkbox functions correctly in JSFiddle, but encounters issues when tested

The toggle button group in the form below utilizes Bootstrap and checkboxes. I am looking to track click events on the checkbox inputs. <html> <head> <title>Example: Bootstrap toggle button group</title> <meta charset="UTF-8 ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

Using CSS in React does not override the CSS preview in Ant Design for React

Working with Tables using antD has been quite an experience. By default, hovering over a Table Row in antD triggers a subtle gray color transition as a highlight. However, I wanted to switch things up and change the color to something different. My attempt ...

cssreactjsantd

Position the navigation bar links to align with the image using bootstrap 5

I have implemented the basic navbar from the Bootstrap website, along with flex-direction set to "column" to display the image above the menu items. https://getbootstrap.com/docs/5.0/components/navbar/ Currently, I have a logo that I want to place with l ...

htmltwitter-bootstrapbootstrap-5

Multiple jQuery click event executions from a single click

Having encountered an issue with multiple clicks being registered in jQuery despite clicking on only one element, I have browsed through various threads on Stack Overflow in an attempt to troubleshoot. However, I suspect that the problem lies within the co ...

javascriptjqueryhtml

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

Evaluate numerical values using xsl:choose function

Using XSL version 1.0, I am populating an HTML table with percentage values from XML. My goal is to display the highlighted color of the percentages based on a condition, but the condition is not being processed as expected, leading to the exclusion of the ...

htmlxmlxsltcompare