Right align text within a list item that does not contain a class or ID

I am trying to right-align a text that does not have any specific id or class assigned to it.

.list{list-style:none;}

.list li{padding:10px;border:1px solid black;margin-top:3px;}
.list li a{color:black;}
.list li a:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 1px; /* same as padding-left set on li */
  margin-right:10px;
}
<ul class="list">
<li class="incomplete"><a href="http://localhost/">First Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Second Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Third Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fourth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fifth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Sixth Lesson</a> - Not completed</li>
</ul>

I need the Not completed text to be aligned to the right side in this layout.

htmlcss

Answer №1

Utilize the flex property for styling li elements and apply justify-content:space-between;

Check out this fiddle to experiment further.

.list {
  list-style: none;
}

.list li {
  padding: 10px;
  border: 1px solid black;
  margin-top: 3px;
  display: flex;
  justify-content: space-between;
}

.list li a {
  color: black;
}

.list li a:before {
  content: "\f00c";
  /* Using FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 1px;
  /* Same as padding-left set on li */
  margin-right: 10px;
}
<ul class="list">
  <li class="incomplete"><a href="http://localhost/">First Lesson</a> - Not completed</li>
  <li class="incomplete"><a href="http://localhost/">Second Lesson</a> - Not completed</li>
  <li class="incomplete"><a href="http://localhost/">Third Lesson</a> - Not completed</li>
  <li class="incomplete"><a href="http://localhost/">Fourth Lesson</a> - Not completed</li>
  <li class="incomplete"><a href="http://localhost/">Fifth Lesson</a> - Not completed</li>
  <li class="incomplete"><a href="http://localhost/">Sixth Lesson</a> - Not completed</li>
</ul>

Answer №2

To align the text to the right, you can add the CSS property text-align: right to the parent element ul, and then use float: left for each a element within it. Here is an example:

.list{list-style:none;text-align: right;}

.list li{padding:10px;border:1px solid black;margin-top:3px;}

.list li a{color:black;float: left;}

.list li a:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 1px; /* same as padding-left set on li */
  margin-right:10px;
}
<ul class="list">
<li class="incomplete"><a href="http://localhost/">First Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Second Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Third Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fourth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fifth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Sixth Lesson</a> - Not completed</li>
</ul>

Answer №3

Enclose "Not completed" with a span tag and then apply the specified style. This should help resolve the issue.

.list li a span {
   float: right;
}

<ul class="list">
   <li class="incomplete"><a href="http://localhost/">First Lesson</a> - <span>Not completed</span></li>
</ul>

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

Ways to change CSS using the * / all notation

After downloading a scrolling image plugin from the internet, I encountered an issue while trying to implement a left-floating Social Media bar. The CSS for the media bar conflicts with the scrolling plugin's CSS and as a result, the social media bar ...

htmlcssfont-awesome

What is the best way to choose all the options in a drop-down menu using Selenium Webdriver?

Currently, I am working with Selenium WebDriver and utilizing Java. In my application, there is a dropdown menu named Product containing multiple values (for example: 60). When running the code, I first deselect all options and then select the specific opt ...

javahtmlseleniumselenium-webdriver

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

javascriptjqueryhtmlcss

Styling a hyperlink with CSS properties

Within my CSS code, a.myLink { hover {font-size: 24; font-weight: bold; color: red; } I want to reference it as follows: <a class="myLink" href="http://myUrl" target='_new'>myName</a> Unfortunately, the CSS is not reco ...

css

What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead? <div class="container-fluid&qu ...

cssbootstrap-4react-bootstrap

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

javascriptjqueryhtmlcssjquery-plugins

How can I ensure that the elements inside the '.box' are responsive, including dropdown buttons, text, and more?

I have successfully made my banner/header responsive, and I placed the dropdown buttons inside a box. I am new to bootstrap and pretty much new to everything, so I just copied some codes from demos. I need help making this specific box responsive along wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

The mobile menu pop-up is malfunctioning

Encountering some challenges with the mobile menu on a website. The opening and closing animation of the background is functioning correctly, displaying the information as intended. However, when testing and clicking on one of the links, the animation simp ...

javascripthtmlcssweb

How do you use CSS and Bootstrap to create a background image that covers one-third of the screen's size?

I have attempted to implement the following using inline CSS along with Bootstrap, but unfortunately it is not functioning correctly. <div class="container" class="img-responsive" class="img-fluid" style="background-image: url('img/projects_cover. ...

cssbootstrap-4

Adjusting the background color of the list item

I'm looking for a way to change the background color of the li tag when the user focuses on the input, similar to what can be seen at the bottom of this page here. After researching similar questions, it appears that achieving this effect in pure CSS ...

javascriptjqueryhtmlcssfocus

The Font Awesome icons are not appearing on the cypress runner container

Currently, I am diving into the world of Cypress by working on my own React todo app. During integration testing, I encountered an issue where my UI icons (sourced from Font Awesome via CDN) were not displaying. As a result, the delete button for my todos ...

htmlreactjswebcypressfont-awesome

What could be causing my div not to scroll horizontally when I add multiple images?

In my code, I have an outer div with an inner div containing a list of images. The issue I am facing is that when the images are wider than the outer div, instead of scrolling horizontally as desired, they just move to the next line without expanding. In c ...

csshtmlscrolloverflow

JavaScript's local storage feature seems to be failing in both saving and retrieving data

I'm working on a fun math game where two random numbers and a sign (+ or -) are generated using Math.random(). The user needs to input their answer in the provided input box. However, I am facing an issue with saving and retrieving the score and high ...

javascripthtmllocal-storage

Recreating the bottom box-shadow effect on top

Having trouble achieving the desired appearance of CSS3 box-shadow. The current setup includes a box-shadow on the content wrapper with the following properties: border: 1px solid #D5D5D5; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 2px #DADADA, ...

borderwrappercss

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

htmlangulartypescript

What is the best way to determine which DOM element is clicked when using the OnClick event? Can

Upon clicking an element: I seek to pinpoint the exact element. To prevent selecting multiple elements (e.g. with the same class) (and with or without an id), I am considering retrieving the absolute location/path in the DOM. Strategy: I have devised two ...

javascripthtmldomonclickdom-events

Trouble with a persistent footer on a webpage using HTML5 and CSS

Check out my code below: <footer> <div id="footer"> <div class="footer-column" id="footer_column1"> <nav class="footer-link"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home& ...

csshtml

transforming a text input into unadorned plain text

Currently, I am in the process of creating a small HTML form that consists of a single textbox input. Once the user enters text into this textbox and clicks on a button located at the end of the page, I would like the textbox to transform into normal plain ...

javascriptjqueryhtml

Deliver real-time notifications to linked users by leveraging socket.io and node.js

Is there a solution for sending real-time updates to connected clients every second without using the setInterval() function in nodejs and socket.io? Please provide an alternative method that fits my specific scenario. ...

javascriptjqueryhtmlnode.jssocket.io

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

javascriptcssreactjsbootstrap-4react-bootstrap