如何在内容下方显示水平滚动条？
选择你的毒药：
.VehicleTimeline_root_3m9Bh {
width: 100%;
border: 1px solid #e7eaec;
position: relative;
}
.VehicleTimeline_unitNumbers_2JJyk {
width: 45px;
margin-top: 20px;
}
.VehicleTimeline_row_2A9QX {
height: 20px;
width: 100%;
}
.VehicleTimeline_row_2A9QX:nth-child(even) {
background-color: rgba(235, 235, 235, 0.5);
}
.VehicleTimeline_code_3ux_j {
display: table-cell;
padding: 3px 0;
height: 20px;
text-align: center;
border-right: 1px solid #e7eaec;
white-space: nowrap;
width: 45px;
box-sizing: border-box;
overflow: hidden;
}
.VehicleTimeline_hrblock_2Wfuc {
display: inline-block;
padding: 2px 0 0 2px;
border-right: 1px solid #e7eaec;
overflow: hidden;
white-space: nowrap;
position: absolute;
top: 0;
bottom: 0;
}
.VehicleTimeline_hrblock_2Wfuc:first-child {
border-left: none;
}
.VehicleTimeline_hrblock_2Wfuc:last-child {
border-right: none;
}
.VehicleTimeline_hrblock_2Wfuc:nth-child(odd) {
background-color: rgba(230, 230, 230, 0.5);
}
.VehicleTimeline_scroll_2WSry {
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
box-sizing: content-box;
left: 45px;
top: 0;
bottom: 0;
right: 0;
}<div data-reactroot="" class="VehicleTimeline_root_3m9Bh">
<div class="VehicleTimeline_unitNumbers_2JJyk">
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Mercedes Sprinter" style="background-color: rgb(206, 37, 154); color: rgb(254, 244, 249);">LV</div>
</div>
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Lincoln Navigator (14pax)" style="background-color: rgb(0, 0, 0); color: rgb(246, 246, 246);">SUV</div>
</div>
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Limo Bus #2" style="background-color: rgb(51, 204, 255); color: rgb(0, 46, 61);">WB</div>
</div>
</div>
<div class="VehicleTimeline_scroll_2WSry">
<div class="VehicleTimeline_timeContainer_2-DVe">
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 0px; width: 60px;">
<!-- react-text: 13 -->1
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 60px; width: 60px;">
<!-- react-text: 16 -->2
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 120px; width: 60px;">
<!-- react-text: 19 -->3
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 180px; width: 60px;">
<!-- react-text: 22 -->4
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 240px; width: 60px;">
<!-- react-text: 25 -->5
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 300px; width: 60px;">
<!-- react-text: 28 -->6
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 360px; width: 60px;">
<!-- react-text: 31 -->7
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 420px; width: 60px;">
<!-- react-text: 34 -->8
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 480px; width: 60px;">
<!-- react-text: 37 -->9
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 540px; width: 60px;">
<!-- react-text: 40 -->10
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 600px; width: 60px;">
<!-- react-text: 43 -->11
<!-- /react-text --><sup>pm</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 660px; width: 60px;">
<!-- react-text: 46 -->12
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 720px; width: 60px;">
<!-- react-text: 49 -->1
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 780px; width: 60px;">
<!-- react-text: 52 -->2
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 840px; width: 60px;">
<!-- react-text: 55 -->3
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 900px; width: 60px;">
<!-- react-text: 58 -->4
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 960px; width: 60px;">
<!-- react-text: 61 -->5
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1020px; width: 60px;">
<!-- react-text: 64 -->6
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1080px; width: 60px;">
<!-- react-text: 67 -->7
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1140px; width: 60px;">
<!-- react-text: 70 -->8
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1200px; width: 60px;">
<!-- react-text: 73 -->9
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1260px; width: 60px;">
<!-- react-text: 76 -->10
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1320px; width: 60px;">
<!-- react-text: 79 -->11
<!-- /react-text --><sup>am</sup></div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1380px; width: 60px;">
<!-- react-text: 82 -->12
<!-- /react-text --><sup>pm</sup></div>
</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
</div>
</div>
</div>
如何让水平滚动条向下移动，使滚动条的上边缘与“WB”的下边缘对齐？
即。应该有3行，其中包含XXX，滚动条不应该覆盖它们。
2 个答案:
答案 0 :(得分：1)
简答：
从bottom: 0;班级中移除.VehicleTimeline_scroll_2WSry。
<强>解释
通过在bottom: 0;类中使用绝对位置设置top: 0;和.VehicleTimeline_scroll_2WSry，现代浏览器会将元素视为具有height: 100%;的相似内容。
因为具有相对位置的父元素的总高度为60px，所以具有绝对位置的子项（现在为overflows，但overflow-y隐藏在父元素中） ，所以没有滚动条。
要避免这种情况，只需从类中删除属性bottom。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.VehicleTimeline_root_3m9Bh {
width: 100%;
//display: table;
border: 1px solid #e7eaec;
position: relative;
}
.VehicleTimeline_unitNumbers_2JJyk {
width: 45px;
margin-top: 20px;
}
.VehicleTimeline_row_2A9QX {
height: 20px;
width: 100%;
&: nth-child(even) {
background-color: rgba(235, 235, 235, .5);
}
}
.VehicleTimeline_code_3ux_j {
display: table-cell;
padding: 3px 0;
height: 20px;
text-align: center;
border-right: 1px solid #e7eaec;
white-space: nowrap;
width: 45px;
box-sizing: border-box;
overflow: hidden;
}
.VehicleTimeline_hrblock_2Wfuc {
display: inline-block;
padding: 2px 0 0 2px;
border-right: 1px solid #e7eaec;
overflow: hidden;
white-space: nowrap;
position: absolute;
top: 0;
bottom: 0;
&: first-child {
border-left: none;
}
&:last-child {
border-right: none;
}
&:nth-child(odd) {
background-color: rgba(230, 230, 230, .5);
}
}
.VehicleTimeline_scroll_2WSry {
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
box-sizing: content-box;
left: 45px;
top: 0;
right: 0;
}<div data-reactroot="" class="VehicleTimeline_root_3m9Bh">
<div class="VehicleTimeline_unitNumbers_2JJyk">
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Mercedes Sprinter" style="background-color: rgb(206, 37, 154); color: rgb(254, 244, 249);">LV</div>
</div>
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Lincoln Navigator (14pax)" style="background-color: rgb(0, 0, 0); color: rgb(246, 246, 246);">SUV01</div>
</div>
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_code_3ux_j" title="Limo Bus #2" style="background-color: rgb(51, 204, 255); color: rgb(0, 46, 61);">WB</div>
</div>
</div>
<div class="VehicleTimeline_scroll_2WSry">
<div class="VehicleTimeline_timeContainer_2-DVe">
<div class="VehicleTimeline_row_2A9QX">
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 0px; width: 60px;">
<!-- react-text: 13 -->1
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 60px; width: 60px;">
<!-- react-text: 16 -->2
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 120px; width: 60px;">
<!-- react-text: 19 -->3
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 180px; width: 60px;">
<!-- react-text: 22 -->4
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 240px; width: 60px;">
<!-- react-text: 25 -->5
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 300px; width: 60px;">
<!-- react-text: 28 -->6
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 360px; width: 60px;">
<!-- react-text: 31 -->7
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 420px; width: 60px;">
<!-- react-text: 34 -->8
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 480px; width: 60px;">
<!-- react-text: 37 -->9
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 540px; width: 60px;">
<!-- react-text: 40 -->10
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 600px; width: 60px;">
<!-- react-text: 43 -->11
<!-- /react-text --><sup>pm</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 660px; width: 60px;">
<!-- react-text: 46 -->12
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 720px; width: 60px;">
<!-- react-text: 49 -->1
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 780px; width: 60px;">
<!-- react-text: 52 -->2
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 840px; width: 60px;">
<!-- react-text: 55 -->3
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 900px; width: 60px;">
<!-- react-text: 58 -->4
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 960px; width: 60px;">
<!-- react-text: 61 -->5
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1020px; width: 60px;">
<!-- react-text: 64 -->6
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1080px; width: 60px;">
<!-- react-text: 67 -->7
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1140px; width: 60px;">
<!-- react-text: 70 -->8
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1200px; width: 60px;">
<!-- react-text: 73 -->9
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1260px; width: 60px;">
<!-- react-text: 76 -->10
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1320px; width: 60px;">
<!-- react-text: 79 -->11
<!-- /react-text --><sup>am</sup>
</div>
<div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1380px; width: 60px;">
<!-- react-text: 82 -->12
<!-- /react-text --><sup>pm</sup>
</div>
</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
<div class="VehicleTimeline_row_2A9QX">xxxxx</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您可以设置修正高度：// either this
when(employeeEndPoint.submit(employee)).thenReturn(
new Response("ERROR"),
new Response("ERROR"),
new Response("SUCCESS") // returned at 3rd call and all following
);
// or that
when(employeeEndPoint.submit(employee))
.thenReturn(new Response("ERROR"))
.thenReturn(new Response("ERROR"))
.thenReturn(new Response("SUCCESS"));// returned at 3rd call and all following
或添加负边距底部：.VehicleTimeline_scroll_2WSry {height: 98px}。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？