我需要你的帮助来解决 CSS 问题。对于我的一个项目，我需要设计一个纯 CSS 时间间隔查看器。由于图片总是比长文本更好，您可以在下面看到我的工作结果：但是，我不想将开始/结束时间放入时间间隔中，而是想将开始时间放置在顶部/左侧上方，将结束时间放置在底部/右侧下方。我想要这样的结果这是 HTML：<ul class="day-timeline"> <li class="time-interval" style="left:4%; width:46%"> <label class="time start-time">01:00</label> <label class="time end-time">12:00</label> </li> <li class="time-interval" style="left:58%; width:17%"> <label class="time start-time">14:00</label> <label class="time end-time">18:00</label> </li></ul><ul class="day-timeline day-timeline-closed"> <li class="time-interval closed"> <label class="time">Closed</label> </li></ul>这是 CSS：* { box-sizing: border-box;}ul.day-timeline { padding: 0; border-left: 1px solid black; border-right: 1px solid black; height: 20px; overflow: hidden; position: relative; &:after { content: ''; width: 100%; height: 1px; background: black; display: block; position: relative; top: 10px; } li { display: block; position: absolute; background-color: #bed4a7; border: 1px solid green; z-index: 1; padding-left: 5px; border-radius: 3px; height: 100%; font-weight: bold; width: 100%; &.closed { background-color: lightgray; border: 1px solid black; label { color :black; } } label { font-size: 0.75rem; color: green; &.start-time { position: absolute; top:-10px; left:0; } } label + label { &:before { content: '-'; padding: 0 0.25rem; } } }}ul.day-timeline-closed { border: none;}您可以在这里看到它：https ://codepen.io/zannkukai/pen/XWbYXjG 。尽管进行了很多尝试，但我从未得到正确的结果:'(CSS大师是否能够帮助我解决我的问题。我认为问题出在定位上。但是我使用的标签范围是否超出label了position:absolute; top:-10px范围父级并且不显示:'(label { font-size: 0.75rem; color: green; &.start-time { position: absolute; top:-10px; left:0; }}
3 回答
达令说
TA贡献1821条经验 获得超6个赞
overflow: hidden从ul.day-timeline中删除，然后您可以在父元素之外写入时间。
听听 ul.day-timeline 的归因：
ul.day-timeline {
padding: 0;
border-left: 1px solid black;
border-right: 1px solid black;
height: 20px;
//overflow: hidden;
position: relative;
并听到整个 css：
* {
box-sizing: border-box;
}
ul.day-timeline {
padding: 0;
border-left: 1px solid black;
border-right: 1px solid black;
height: 20px;
//overflow: hidden;
position: relative;
&:after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}
li {
display: block;
position: absolute;
background-color: #bed4a7;
border: 1px solid green;
z-index: 1;
padding-left: 5px;
border-radius: 3px;
height: 100%;
font-weight: bold;
width: 100%;
&.closed {
background-color: lightgray;
border: 1px solid black;
label {
color :black;
}
}
label {
font-size: 0.75rem;
color: green;
&.start-time-first {
position: absolute;
top: -15px;
left: 0px;
}
&.end-time-first {
position: absolute;
top: 20px;
right: 5px;
}
&.start-time-second {
position: absolute;
top: -15px;
left: 0px;
}
&.end-time-second {
position: absolute;
top: 20px;
right: 5px;
}
}
}
}
ul.day-timeline-closed {
border: none;
}
以及您必须重命名以定位时间的类：
HTML 代码片段
<li class="time-interval" style="left:4%; width:46%">
<label class="time start-time-first">01:00</label>
<label class="time end-time-first">12:00</label>
</li>
<li class="time-interval" style="left:58%; width:17%">
<label class="time start-time-second">14:00</label>
<label class="time end-time-second">18:00</label>
</li>
元芳怎么了
TA贡献1798条经验 获得超7个赞
这是一个 CSS 的工作片段，我还包括一个codepen，基本上你只需要使用 left 和 right CSS 属性即可在使用后工作position:absolute，最后我添加right:0以强制其位置向右，left:0用于强制其位置向左的开始时间，以及 x 轴位置的顶部和底部 CSS 属性。
* {
box-sizing: border-box;
}
ul.day-timeline {
padding: 0;
border-left: 1px solid black;
border-right: 1px solid black;
height: 20px;
position: relative;
}
ul.day-timeline:after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}
ul.day-timeline li {
display: block;
position: absolute;
background-color: #bed4a7;
border: 1px solid green;
z-index: 1;
padding-left: 5px;
border-radius: 3px;
height: 100%;
font-weight: bold;
width: 100%;
}
ul.day-timeline li.closed {
background-color: lightgray;
border: 1px solid black;
}
ul.day-timeline li.closed label {
color: black;
}
ul.day-timeline li label {
font-size: 0.75rem;
color: green;
}
ul.day-timeline li label.start-time-first {
position: absolute;
top: -15px;
left: 0px;
}
ul.day-timeline li label.end-time-first {
position: absolute;
top: 20px;
right: 0;
}
ul.day-timeline li label.start-time-second {
position: absolute;
top: -15px;
left: 0px;
}
ul.day-timeline li label.end-time-second {
position: absolute;
top: 20px;
right: 0;
}
ul.day-timeline-closed {
border: none;
}
<ul class="day-timeline">
<li class="time-interval" style="left:4%; width:46%">
<label class="time start-time-first">01:00</label>
<label class="time end-time-first">12:00</label>
</li>
<li class="time-interval" style="left:58%; width:17%">
<label class="time start-time-second">14:00</label>
<label class="time end-time-second">18:00</label>
</li>
</ul>
<ul class="day-timeline day-timeline-closed">
<li class="time-interval closed">
<label class="time">Closed</label>
</li>
</ul>
有只小跳蛙
TA贡献1824条经验 获得超8个赞
您已成功移动开始时间，但您已overflow: hidden设置ul，因此它会按要求隐藏。ul.day-timeline { overflow: visible; }从那里出发
- 3 回答
- 0 关注
- 85 浏览
添加回答
举报
0/150
提交
取消