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

Html – Tag <li> moves to the left when adding dynamically via JS

While trying to add <li> tags to <ul> list using JavaScript, the tags start to move to the left increasingly (distance between horizontal tags is becoming smaller).

let days_list = document.querySelector('.days');
for (let day = 1; day <= 30; day++) {
  let li_tag = document.createElement('li');
  li_tag.innerHTML = day.toString();
  days_list.append(li_tag)
}
li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size: 15px;
  color: black;
  vertical-align: top;
}
<div>
  <ul class="days">
    <li>12</li>
    <li>12</li>
    <li>12</li>
  </ul>
</div>

Although static adding of the same elements does not cause such a problem. CSS selectors seem to work perfectly as the dynamic tags have prescribed colors, fonts etc.

vertical-align: top; does not work either. What seems to be the problem?

Tags:

2

Answers


  1. 0

    Have you tried to using a grid layout with?:

    • display: grid and
    • grid-template-columns: repeat(7, auto)
    const firstOfMonth = (year, month) => new Date(year, month, 1);
const daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();

const now = new Date();
const startDay = firstOfMonth(now.getFullYear(), now.getMonth()).getDay();
const totalDays = daysInMonth(now.getFullYear(), now.getMonth());
const today = now.getDate();

const dayList = document.querySelector('.days');

// Skip days in first week by rendering blank list items
for (let dayIndex = 0; dayIndex < startDay; dayIndex++) {
  let li = document.createElement('li');
  li.textContent = '';
  dayList.append(li);
}

// Add all dates for the current month
for (let day = 1; day <= totalDays; day++) {
  let li = document.createElement('li');
  li.textContent = day;
  dayList.append(li);
  if (day === today) {
    li.classList.add('active');
  }
}
    html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-flex-wrapper {
  display: flex;
}

ul.days {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-row-gap: 0.25rem;
  grid-column-gap: 0.25rem;
  margin: 0;
  padding: 0;
}

ul.days li {
  list-style-type: none;
  display: block;
  text-align: right;
  margin: 0;
  padding: 0.5rem;
}

.active {
  background: yellow;
  border-radius: 50%;
}
    <div class="grid-flex-wrapper">
  <ul class="days"></ul>
</div>
    Login or Signup to reply.
  2. 0

    You set the display of your list elements to inline-block, and inline elements are sensitive to the white space in your code. Simply get rid of the space around your 12’s and everything will look normal.

    let days_list = document.querySelector('.days');
for (let day = 1; day <= 30; day++) {
  let li_tag = document.createElement('li');
  li_tag.innerHTML = day.toString();
  days_list.append(li_tag)
}
    li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size: 15px;
  color: black;
  vertical-align: top;
}
    <div>
  <ul class="days"><li>12</li><li>12</li><li>12</li></ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search