我需要你的幫助來解決 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 關注
- 190 瀏覽
添加回答
舉報
0/150
提交
取消