Home » vue » li not left aligning inside ul [duplicate]

li not left aligning inside ul [duplicate]

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’ve seen other posts similar to this but they didn’t seem to provide a solution. I’m kaing a js calendar and the days are inside a however I cannot get the

  • items to align left, it seems like they are padded on the left side see img below.

    I am hoping someone can tell me if theres a way to remove this ghost padding?
    many thanks 🙂

    enter image description here

    I have included my current code and the css classes I’m currently using. I have a few vue inline styles but

    <!--jan-->
    <div v-if="month==1" class="month">
    
    <div>
        <div>
            <b>January</b><br><span> {{this.year}}</span>
        </div>
        
        <div>
            <ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
                <li class="prev">❮</li>
                <li class="next">❯</li>
            </ul>
        </div>
    </div>
    
    <ul class="weekdays">
      <li class="days">Mo</li>
      <li class="days">Tu</li>
      <li class="days">We</li>
      <li class="days">Th</li>
      <li class="days">Fr</li>
      <li class="days">Sa</li>
      <li class="days">Su</li>
    </ul>
    
    <ul class="daysList">
      <li class="daynum">1</li>
      <li class="daynum">2</li>
      <li class="daynum">3</li>
      <li class="daynum">4</li>
      <li class="daynum">5</li>
      ... etc
     
      </ul>
      </div>
    
      <!--jan-->
    
    
    
    
    ////css//////
    
    .daysList{
    
        width: 100%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        justify-content: left;
        background: rgb(231, 131, 131);
    
        
    }
    .daysList li{
        background-color: lime;
        display: inline;
        margin: .5em;
        width: 22px; 
        padding: 5px;  
    }
    .daysList li:hover{
        cursor:pointer;
        color:white;
        background-color: blue;  
    }
    
    
    Answers:

    The <ul> has some margin and padding added by the user agent stylesheet. You can remove them from your calendar component’s <ul>s with:

    <style scoped>
    ul {
      margin: 0;
      padding: 0;
    }
    </style>
    

    demo