<li>元素重叠吗?共享容器宽度而不重叠? Javascript,HTML,CSS

My intentions are to create a schedule layout where each <li> item are placed on the Y axis relative to a timeline on the left. The problem occur when more then one <li> are placed overlapping each other:

Problem example

What I want to achieve is the <li> elements being able to share the width of the list element, <ul>, like this:

Achievement example

Note: The <li>elements still needs to be placed on the vertical axis relative to the timeline shown in first example.

如您所见,元素被放置为共享容器的宽度,并且在不重叠任何其他元素的情况下尽可能向左对齐。

这是我正在处理的页面的摘录:

::-webkit-scrollbar {
    display: none;
}
.day_div ul {
    width: 100%;
    position: relative;
}

.day_div li,
#info_holder li {
    position: relative;
    /* background-color: red; */
    color: white;
    transition: transform .2s ease-in-out;
    cursor: pointer;
    transform: scale(1) rotate(0deg);

    border-radius: 5px;
}

.day_div li::after,
#info_holder li::after {
    content: '';
    position: absolute;
    /* z-index: -1; */
    width: 100%;
    height: 100%;
    opacity: 1;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    /* opacity: 0;
      transition: opacity 0.2s ease-in-out; */
}

.day_div li.no-after::after,
#info_holder li.no-after::after {
    display: none;
    width: 0;
    height: 0;
}

.day_div li::before {
    border-radius: 5px;
}

.day_div li:hover.rotatable {
    /* transform: scale(0.9) rotate(6deg); */
    transform: rotate(6deg);
}


/* .day_div li:hover::after {
      opacity: 1;
    } */

/* skipping 1st child as it is the timeline */
.day_div li {
    background: rgb(60, 225, 226);
    background: linear-gradient(315deg, rgba(60, 225, 226, 1) 0%, rgba(28, 55, 172, 1) 100%);
}

.day_div:nth-child(3) li,
#info_holder li.three {
    background: rgb(60, 226, 124);
    background: linear-gradient(340deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div:nth-child(4) li,
#info_holder li.four {
    background: rgb(122, 168, 91);
    background: linear-gradient(0deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(5) li,
#info_holder li.five {
    background: rgb(246, 176, 101);
    background: linear-gradient(20deg, rgba(246, 176, 101, 1) 0%, rgba(246, 127, 101, 1) 100%);
}

.day_div:nth-child(6) li,
#info_holder li.six {
    background: rgb(156, 87, 151);
    background: linear-gradient(25deg, rgba(156, 87, 151, 1) 0%, rgba(67, 51, 82, 1) 100%);
}

.day_div:nth-child(7) li,
#info_holder li.seben {
    background: rgb(122, 168, 91);
    background: linear-gradient(30deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(8) li,
#info_holder li.eight {
    background: rgb(60, 226, 124);
    background: linear-gradient(35deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div li a,
#info_holder li a {
    top: 0;
    left: 0;
    position: absolute;
    /* width: 100%;
      height: 100%; */
    padding: calc(0.75* 1.25em);
}

.day_div li div,
#info_holder li div {
    display: block;
    position: absolute;
    padding: calc(0.75*1rem);
    overflow: scroll;
    height: 60%;
}

.day_div li a em,
#info_holder li a em {
    font-size: calc(var(--main-text-size)*0.8);
}

.day_div li.content_cutoff a::before,
#info_holder li.content_cutoff a::before {
    display: inline-block;
}

.day_div li a::before,
#info_holder li a::before {
    content: attr(data-start) " - "attr(data-end);
    display: block;
    color: #f1f1f1;
    font-weight: bold;
    font-size: calc(var(--main-text-size)*0.9);
}

.day_div li a.databefore::before,
#info_holder li a.databefore::before {
    content: attr(data-before);
}

.day_div li a em,
#info_holder li a em {
    font-size: calc(var(--main-text-size)*1.2);
}

.day_div:not(:first-child):not(:nth-child(2)) {
    border-left: none;
}

.day_div:last-child {
    border-right: none;
}

.day_div {
    /* may change to be a 5th of parent */
    border: 1px solid #ebebeb;
    width: 16%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.day_div span {
    /* this is the day text styling */
    position: absolute;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ebebeb;
}
<div class="day_div">
    <!-- monday -->
    <span style="height: 50px; width: 238px;">Måndag</span>
    <ul style="margin-block-start: 25px;">
        <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: 25px; height: 100px;"><a data-start="08:00" data-end="09:00"><em>Matte</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Göran</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(189px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(307px + 0.9375em);"><em>Ja</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: block;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
        </li>
        <li data-overlappers="2" data-overlapping="0" class="rotatable" style="top: 41.6667px; height: 83.3333px;"><a data-start="09:10" data-end="10:00"><em>Spanska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Lisa &amp; Andy</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(223px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(341px + 0.9375em);"><em>Nej</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
        </li>
        <li data-overlappers="2" data-overlapping="1" class="rotatable" style="top: -41.6667px; height: 116.667px;"><a data-start="09:10" data-end="10:20"><em>Tyska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Mackan</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(202px + 0.9375em);"><em>Akvariet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(297px + 0.9375em);"><em>Nej</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Presens som vanligt, glöm inte digilär</span></div>
        </li>
        <li data-overlappers="1" data-overlapping="2" class="rotatable" style="top: -141.667px; height: 83.3333px;"><a data-start="09:20" data-end="10:10"><em>Franska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Esma</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(184px + 0.9375em);"><em>grupprummet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(327px + 0.9375em);"><em>Nej</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
        </li>
        <li data-overlappers="0" data-overlapping="2" class="rotatable" style="top: -158.333px; height: 300px;"><a data-start="10:00" data-end="13:00"><em>Lunch</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em></em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(181px + 0.9375em);"><em></em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(271px + 0.9375em);"><em>Nej</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
        </li>
        <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: -158.333px; height: 200px;"><a data-start="13:00" data-end="15:00"><em>Mentorstid</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(117px + 0.9375em);"><em>Patrik</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(194px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(312px + 0.9375em);"><em>Nej</em></a>
            <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
                    <metadata></metadata>
                    <g>
                        <title>background</title>
                        <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
                        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
                        </g>
                    </g>
                    <g>
                        <title>Layer 1</title>
                        <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
                    </g>
                </svg></div>
            <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Ta med datorer och inlämmningslapp</span></div>
        </li>
    </ul>
</div>

Here is the jsfiddle: https://jsfiddle.net/Snakehater/6dk84n1y/8/

如果因为我需要尽快回答而使任何事情变得不清楚或令人困惑,请告诉我,解决方案可以是javascript,html或css,只要它可以工作即可。提前致谢。