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


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

    <div v-if="month==1" class="month">
            <b>January</b><br><span> {{this.year}}</span>
            <ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
                <li class="prev">❮</li>
                <li class="next">❯</li>
    <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 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
        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{
        background-color: blue;  

    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;