【发布时间】：2020-08-02 15:02:51
【问题描述】：
我的意图是创建一个时间表布局，其中每个<li> 项目都放置在相对于左侧时间线的 Y 轴上。当多个<li> 相互重叠放置时会出现问题：
我想要实现的是<li> 元素能够共享列表元素<ul> 的宽度，如下所示：
注意：<li>elements 仍然需要放置在相对于第一个示例中显示的时间轴的垂直轴上。
如您所见，元素被放置以共享容器的宽度，并尽可能向左对齐，而不会与其他任何内容重叠。
这是我正在处理的页面中的一个 sn-p：
::-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/
我该如何解决这个问题？
【问题讨论】：
-
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
标签： javascript html css html-lists