<li> 元素重叠？共享容器宽度而不重叠？
<li> elements overlapping? Share container width without overlapping?
我的意图是创建一个日程安排布局，其中每个 <li> 项目都放置在相对于左侧时间轴的 Y 轴上。当多个 <li> 相互重叠放置时会出现问题：
我想要实现的是 <li> 元素能够共享列表元素 <ul> 的宽度，如下所示：
注意：<li>元素仍然需要放置在相对于第一个示例中显示的时间轴的垂直轴上。
如您所见，放置的元素共享容器的宽度，并尽可能向左对齐，不会与其他任何部分重叠。
这是我正在处理的页面的一个片段：
::-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 & 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>
这是 jsfiddle：https://jsfiddle.net/Snakehater/6dk84n1y/8/
我该如何解决这个问题？
使用弹性框。 Flexbox Guide。您将需要多个 flexboxes
实现你想要的。会有轻微的返工，但之后进行对齐会容易得多。你还应该学习 CSS Grids.
ul{
display:flex;
flex-direction:column;
justify-content:space-between;
}
我的意图是创建一个日程安排布局，其中每个 <li> 项目都放置在相对于左侧时间轴的 Y 轴上。当多个 <li> 相互重叠放置时会出现问题：
我想要实现的是 <li> 元素能够共享列表元素 <ul> 的宽度，如下所示：
注意：<li>元素仍然需要放置在相对于第一个示例中显示的时间轴的垂直轴上。
如您所见，放置的元素共享容器的宽度，并尽可能向左对齐，不会与其他任何部分重叠。
这是我正在处理的页面的一个片段：
::-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 & 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>
这是 jsfiddle：https://jsfiddle.net/Snakehater/6dk84n1y/8/
我该如何解决这个问题？
使用弹性框。 Flexbox Guide。您将需要多个 flexboxes 实现你想要的。会有轻微的返工，但之后进行对齐会容易得多。你还应该学习 CSS Grids.
ul{
display:flex;
flex-direction:column;
justify-content:space-between;
}