[Vuejs]-How to align text in a list element with the next one below?

by

0👍

Using table would be better approach to achieve such scenario. Although, try with giving fixed width.

0👍

Just specify a width for each inner column inside a li element:

li {
        list-style-type: none;
        background: cornflowerblue;
        margin: 50px auto;
        padding: 5px 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        width: 1000px;
        justify-content:space-between;
        
        > * {                   
          &:nth-child(1) {
            width:20%
          }
          &:nth-child(2) {
            width:25%
          }
          &:nth-child(3) {
            width:35%
          }
          &:nth-child(4) {
            width:20%;
            text-align:right;
          }              
        }
       }

Leave a comment