Arrange elements prior to the treeview within the unordered list/ list items

Below is a snippet of code that I am working with:

<ul>
    <li>group 1
    <ul>
    <li>group 1.1</li>
    <li> group 1.2</li>
    <li>group 1.3
    <ul> 
    <li>group 1.3.1</li>
    <li> group 1.3.2</li>
 </ul>
</li>
</ul>
</li>
    <li>group 2</li>
    <li>group 3</li> 
</ul>

I am looking to enhance this treeview by adding formatted numbers on the left side, vertically aligned, as shown in the following image:

https://i.sstatic.net/Kt1xn.png

<ul>
    <li><span style="margin-left:-30px">10</span>group 1
    <ul>
    <li><span style="margin-left:-30px">20</span>group 1.1</li>
    <li><span style="margin-left:-30px">15</span> group 1.2</li>
    <li><span style="margin-left:-30px">07</span>group 1.3
    <ul> 
    <li><span style="margin-left:-30px">100</span>group 1.3.1</li>
    <li><span style="margin-left:-30px">08</span> group 1.3.2</li>
 </ul>
</li>
</ul>
</li>
    <li><span style="margin-left:-30px">90</span>group 2</li>
    <li><span style="margin-left:-30px">110</span>group 3</li>
    
</ul>

I have attempted to place span elements on the left side and align the numbers within them, but so far it has not been successful.

If you have any suggestions or solutions, I would greatly appreciate it!

Thank you

javascripthtmlcss

Answer №1

Check out this CSS solution that might just be what you need.

.top-level-list {
  position: relative;
  padding-left: 80px;
}

li>span:first-child {
  position: absolute;
  left: 0px;
}
<html>
    <body>
        <ul class="top-level-list">
          <li><span>1000.</span>group 1</li>
          <ul>
            <li><span>20.</span>group 1.1</li>
            <li><span>15.</span>group 1.2</li>
            <li><span>07.</span>group 1.2</li>
            <li><span>102220.</span>group 1.3</li>
            <ul> 
              <li><span>083113.</span>group 1.3.1</li>
              <li><span>17.</span>group 1.3.2</li>
            </ul>
          </ul>
          <li><span>90189.</span>group 2</li>
          <li><span>110.</span>group 3</li>
      </ul>
    </body>
  </hmtl>

Answer №2

Is your code resembling the example output you provided? If the issue is related to the appearance of the points, that can be adjusted using CSS.

li {
liststyle: disc, circle,......;
}

We apologize for any confusion in advance.

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

Halt the Bootstrap carousel while entering text in a textarea

Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...

javascriptjqueryhtmltwitter-bootstrap

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

jqueryhtmlcsstwitter-bootstrap

The ng-click function for the button is malfunctioning when viewed on a mobile device within the datatable

Can anyone assist in troubleshooting why the ng-click function is not working on the mobile view of Datatable? <tr class="child"> <td class="child" colspan="3"> <ul data-dtr-index="0"> <li data-dtr-ind ...

htmlcssangularjsdatatable

"Unlocking the JSON element with jQuery Ajax: A step-by-step guide

I am trying to pinpoint a specific element within my JSON data: { "taskMeta": "Some meta info", "tasksLib": [ { "task001": { "id":"1", "createDate":"01.02.17", "dueDate":"02.03.17", "au ...

javascriptjqueryjsonajax

The method continues to receive null values from Ajax despite successfully retrieving the data from Facebook

My current challenge involves creating a login using Facebook. The console indicates that the requested data (email, first_name, etc.) is being retrieved successfully, but for some reason, the AJAX request keeps sending null data to the PHP method. Below ...

javascriptajaxfacebookcodeigniter

Creating a dynamically generated JavaScript array using the JSON format

I am in need of creating an array of JSON data. Here is an example: [ { "DataCategoryGroupId": "22222222-2222-2222-2222-222222222222", "AnswerOptionIds": [ "76e32546-0e26-4037-b253-823b21f6eefb", "10d02a3e-9f9f- ...

javascriptjson

Alignment of headers and footers in email newsletters for various email clients<td>

With my limited coding skills, I've been struggling to keep the header and footer aligned properly in all email clients. The footer consistently displays a 1 px gap between elements, which causes it to move around unpredictably. Here's the full s ...

htmlcss

What is the best method to connect a favicon in a Ruby on Rails application?

Here is what I am attempting. <%= image_tag 'favicon.ico', icon="rel" type="image/x-icon" %> ...

htmlruby-on-railsfavicon

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

I have been attempting to implement the color-calendar plugin by following their tutorial closely. I have replicated the code from both the DEMO and documentation, shown below: // js/calendar.js import Calendar from '../node_modules/color-calendar&ap ...

javascripthtmlcss

Creating an array within a mat table that is enclosed within an observable

I have a Parent List component that includes two child components: First Child List and Second Child List. In the Second Child List component, there is a Mat Table that receives input data for display. I create the data source in the ngOnChanges method usi ...

javascriptangularrxjsangular-materialangular-reactive-forms

Is it possible to include a callback function or statement following a $timeout in AngularJS?

function fadeAlertMessage() { $scope.alertMessagePopUp = true; $timeout(function() { $scope.fade = true; }, 5000) function() { $scope.alertMessagePopUp = false; } I'm facing a challenge and I'm seeking assistance with this is ...

javascriptangularjs

React-onclickoutside does not function properly within an iframe

I have developed a custom drop-down list using reactjs. I utilized react-onclickoutside to recognize clicks outside the list and close it. While this method works effectively, it does not respond to clicks within an iframe. import onClickOutside from &apo ...

javascriptreactjsiframe

Can multiple groupings of objects be viewed in a JSON file?

Currently, I am interested in creating a leveling system without relying on a database. While I understand that using a database is the more efficient approach, my server doesn't have a large user base and I have yet to learn how to work with database ...

javascriptnode.jsdiscorddiscord.js

What exactly does the Javascript object syntax signify? (specifically in a Vue script)

Can anyone explain the purpose of this statement and the difference between using const and var? const { SearchIcon } = myApp.icons; I am currently exploring Vue and still relatively new to Javascript. This code snippet appeared in a tutorial example. The ...

javascriptvue.js

Which IDEs offer code hinting capabilities for Three.js in JavaScript?

Looking for a Javascript IDE or editor that offers code hints for external files like Three.js. Any recommendations are welcome! ...

javascriptideeditorthree.jscode-hinting

Using Formik inside Material-UI's table components

My goal is to design a material UI table where each cell acts as a Formik input. However, I've encountered errors with Material UI when attempting to use a Formik Object within TableBody or TableItem tags. Here's an example image of what I' ...

javascriptreactjsfrontendmaterial-uiformik

Expanding Headers with JavaScript

Looking to add a Stretchy Header Functionality similar to the one shown in this GIF: Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with C ...

javascriptioscssangularjsionic-framework

IntelliJ does not support the use of newlines within Vue.js component templates

While working with Vue.js in IntelliJ IDEA, I encountered a small problem related to defining component templates. The issue is that IntelliJ seems to struggle when the template spans more than one line and attempts to concatenate them together. For examp ...

javascriptintellij-ideavue.jswebstorm

What is the best way to arrange an array of objects based on a specific attribute?

Ordering object based on value: test": [{ "order_number": 3, }, { "order_number": 1, }] Is there a way to arrange this so that the object with order_number 1 appears first in the array? ...

javascriptjquerysortingobject

Here is a guide on how to specify function selection values for a total order. By default, the selection will have predetermined values, and upon clicking the sum button,

<tr id=""> <th> <select id="selection" onchange="myFunction()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dres ...

javascripthtml