Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: 

div{
  width: 200px;
  border: 1px solid black;
}

ul{
  margin: 0px;
  padding: 0px;
}

li{
  margin: 2px;
  width: 20px;
  display: inline-block;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

However, I need the tabs to be arranged as:

1 2 3
4 5 6 7 8 9 10

Is there a way to achieve this without using JavaScript?

htmlcss

Answer №1

If you switch the order of your li elements, you can make it work by using a mix of wrap-reverse and row-reverse along with setting display: flex.

ul {
  list-style: none;
  display: flex;
  width: 100px;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

li {
  margin-left: 2px;
  margin-right: 2px;
}
<html>
  <body>
    <ul>
      <li>10</li>
      <li>9</li>
      <li>8</li>
      <li>7</li>
      <li>6</li>
      <li>5</li>
      <li>4</li>
      <li>3</li>
      <li>2</li>
      <li>1</li>
    </ul>
  </body>
</html>

Answer №2

To create a line break after the third list item, you can simply add a <br> tag:

...
<li>3</li><br>
<li>4</li>
...

Answer №3

<section>
  <ol>
    <li>a</li>
    <li>b</li>
    <li>c</li><br>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
  </ol>
</section>

Feel free to give this a try.

Answer №4

div{
  width: 200px;
  border: 1px solid black;
}

ul{
  margin: 0px;
  padding: 0px;
}

li{
  margin: 2px;
  width: 20px;
  display: inline-block;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <br/>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

Simply insert a line break

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

The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature. <div class="form-floating" ...

htmlcssfrontendbootstrap-5web-frontend

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

htmlangularjsiframe

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

cssbootstrap-4media-queries

Automatically inserting a row into an HTML table

My table structure looks like this: <form name="frm_data_nasabah2" method="post" enctype="application/x-www-form-urlencoded" action="<?php echo $page_action;?>"> <table class="table table-bordered table-hover" id="tab_logic_ ...

javascripthtml

Create a CSS style that locks the first column of a table in place while allowing the rest of the columns to scroll horizontally on an HTML webpage

There are numerous solutions available for creating a table with frozen columns and scrollable content, such as: how do I create an HTML table with fixed/frozen left column and scrollable body? However, my specific requirement is to have the scroll bar o ...

htmlcsscss-tables

Having issues with displaying options in Select2 within a Vue Component?

I have successfully created a Vue component that generates options for a select dropdown as shown below: <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class=&qu ...

javascripthtmlvue.jsjquery-select2

HTML scroll bar functioning intermittently

Here is my code snippet. table#projectTable > tbody , table#productTable > tbody{ height: 300px; overflow: auto; } The scrollbar is functional when clicking the top part, but not the bottom. It's quite odd. Upon usin ...

htmlcssscrollbar

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

csslayout

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

javascripthtmlcsscss-transforms

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

Another choice for object-fit:contain workaround for IE

Is there an alternative option to object-fit: contain that is compatible with Internet Explorer? Below is a snippet of my code: .cbs-Item img { height: 132px ! important; width: 132px ! important; object-fit: contain; <div class="cbs-Ite ...

javascripthtmlcss

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

Adding input values to a jQuery Ajax POST request

I am currently attempting to send form values to a remote API using AJAX. The necessary information I require from the HTML form element includes the author, string, false, and true. At the moment, I have hard-coded some values but... function sendData ...

javascriptjqueryhtmlajax

Parent element with 'overflow: hidden' in CSS is causing child styles to be cropped out

.util-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a { text-decoration: none; } a:focus { box-shadow: 0 0 0 3px blue; text-decoration: underline; } a:focus-visible { outline: 0; } <div ...

javascripthtmlcss

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

What is the best way to design an element in HTML/CSS with a curved semicircle border at the top?

I'm looking to design an HTML/CSS element that features a semicircle at the top-middle with a border. Inside this semicircle, I want to place a smaller circle containing a single character (similar to the X in the provided image). Additionally, there ...

htmlbordergeometrycss

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

One issue I'm encountering is with my card element, which has a fixed height of h-80 in Tailwind. Typically, I use this card within a grid. However, I recently added a div inside the card that is larger than its parent div, and I want it to scroll ve ...

javascripthtmlvue.jstailwind-css

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

cssopacity

The sticky position is malfunctioning even when there is no parent element with the overflow hidden property

// observer for feature section let featuresSection = document.querySelector('#featuresSection'); let callbackFeature = (items) => { items.forEach((item) => { if (item.isIntersecting) { item.target.classList.add("in ...

javascripthtmlcsssticky