Question 217699 in Html Question posted in
Some basic documentation can be found here.

Html – How to align text in a list element with the next one below?

enter image description here

As you can see the text is not in line with the text below. I am using justify-content: space-between for this, and think this is the problem but I can’t think of a solution.


    <style>

        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;
        }

        ul {
            margin-left: 0;
            padding-left: 0;
        }

    </style>


            <ul>
                <li v-for="project in projectsInfo">
                    <h3>{{ project.title }}</h3>
                    <h3>{{ project.date }}</h3>
                    <h3>{{ project.role }}</h3>
                    <h3>{{ project.visits }}</h3>
                    <h3 :href='project.link'>GAME LINK</h3>
                </li>
            </ul>
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 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;
          }              
        }
       }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search