Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 Item4

I was able to achieve this layout, but the bullets on the right side were still appearing on the left. How can I fix this issue with the bullets included?

ul{
list-style-type: none;
padding-left: 0;

}

ul li {
    margin: 25px 0;
    padding-left: 45px;
}
ul li.odd {
    float:right;
}
    ul li.even {
        position:relative;
    }



 <ul>
   <li class="odd">
      Item1  
    </li>

     <li class="even">
        Item2
    </li>
htmlcssalignment

Answer №1

To achieve custom bullet points using CSS, you can create a styled list and then utilize the nth-child selector to customize them to your liking, as demonstrated in the snippet below.

.custom-list {
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0;
}

.custom-list li {
  position: relative;
  padding-left: 10px;
  float: left;
}
.custom-list li:before {
  border-radius: 100%;
  position: absolute;
  background: #000;
  content: '';
  height: 5px;
  width: 5px;
  top: 6px;
  left: 0;
}
.custom-list li:nth-child(even) {
  padding-right: 10px;
  text-align: right;
  padding-left: 0;
  float: right;
}
.custom-list li:nth-child(even):before {
  left: auto;
  right: 0;
}
<ul class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

You also have the option to remove the float property if desired:

.custom-list {
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0;
}

.custom-list li {
  position: relative;
  padding-left: 10px;
}
.custom-list li:before {
  border-radius: 100%;
  position: absolute;
  background: #000;
  content: '';
  height: 5px;
  width: 5px;
  top: 6px;
  left: 0;
}
.custom-list li:nth-child(even) {
  padding-right: 10px;
  text-align: right;
  padding-left: 0;
}
.custom-list li:nth-child(even):before {
  left: auto;
  right: 0;
}
<ul class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</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

When clicking on HTML input fields, they do not receive focus

I am facing a puzzling issue where I am unable to access the input fields and textareas on my HTML form. The JS, HTML, and CSS files are too large for me to share here. Could someone provide guidance on what steps to take when troubleshooting this unusual ...

javascripthtmlcss

Ways to apply Angular ng-options outside of a select element besides traditional use?

According to the official documentation, ng-options can be used on any element, not limited to just the select tag. This flexibility allows for enhanced customization of the selection UI, such as displaying thumbnail images or additional information beyond ...

javascripthtmlangularjsselection

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

javascriptjqueryhtml

Steps to trigger a JavaScript popup from an iframe window to the parent window

Currently I am developing a web application using JSP with JavaScript. Within the parent window, an iframe is being utilized. The issue arises when a button in the iframe page is clicked, as it opens a popup window within the iframe itself. However, my obj ...

javascripthtmljsp

Item floating in a list

I'm facing a challenging issue that I need help with. It's a bit complicated to explain, but I'll do my best. There's also a picture included to help illustrate the problem. The problem I have is with an ordered list. When the next row ...

htmlcss

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

Currently, I am developing a web-based application that is capable of generating documents containing specific data. A new functionality has been introduced in the document generator, allowing users to input an Atlassian Confluence link into a designated t ...

c#htmlcssasp.net

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...

javascriptjqueryhtmlcss

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

javascripthtmlangularjs

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

htmlcss

Halt spread: descend in a bubble?

It seems that the issue at hand may not be related to propagation, but rather a design flaw. I have come across information suggesting that propagation problems tend to bubble up, however, let me explain my situation. I am working with a table edit grid. ...

javascripthtmlcssangularjsstoppropagation

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs"> <ul class="nav ultab" id="fram"> <li class="active"><a href="#history" data-toggle="tab" id="history1" >History< ...

javascripthtmlcsstwitter-bootstrapscrollbar

Changing images dynamically in tinymce using JavaScript

When using the tinymce editor, I attempt to modify my images. I currently have an image within it and I am trying to dynamically change the path of this image with: tinymce.activeEditor.selection.getNode().src = '/my/path/' Surprisingly, this m ...

javascripthtmltinymce

event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...

cssz-index

Comment sections that refresh automatically after being posted

I am determined to provide a clear explanation. Despite having some code, I am uncertain about how to make it clone comments and add new ones with user inputted text. Below is the snippet of code I am struggling with: <!DOCTYPE html> <!-- this i ...

javascriptjqueryhtmldom

Could the Google Font "Exo 2" be causing the size issue with HTML Canvas 2DContext.font?

As I work on creating a canvas and adding text to it, I have encountered an issue with the font Exo 2. Every other font works perfectly except for this one. Exo 2 is a Google font, and my suspicion is that the number "2" at the end of the name might be ca ...

htmlcanvasthree.jshtml5-canvaswebfonts

Sprite hover image in IE9 not aligned properly or blurry by 1 pixel

I have implemented a sprite to display my button image and a slightly darker hover image. Below is the CSS code I am using, with my image being 31px tall: a { background-position: 0 0; } a:hover { background-position: 0 -31px; } Although the ho ...

cssinternet-explorer-9spritecss-sprites

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

jqueryhtmlcssajax

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml