Question

我正在创建一个调度网络应用程序，并使用彩色块来指示可用性，我正在使用带有背景颜色的空div。现在我正在尝试使用具有相对定位的嵌套div在它们上面给出这些块标签。问题是标签div中的文本被剪裁，即使块的溢出属性设置为可见。

我的css就是：

.om-wrap{
    position: relative;
    top: 18px;
    width: 100%;
   overflow: auto;
   overflow-y: visible;
   margin: 0 auto;
   white-space: nowrap
}
.time-end{
    position: absolute;
    right: 0;
}
.time-start{
    position: absolute;
    left: 0;
}
.slot{
    position: relative;
    left:10px;
    display: inline-block;
    min-width: 20px;
    width: 20px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-bottom: 10px;
    padding: 0px;
    font-size: 18px;
    overflow: visible;

}
.slot:first-of-type{
clear:both;
}
.slot-avail{
    background-color: green;
}
.slot-break{
    background-color: yellow;
}
.slot-full{
    background-color: red;
}
.slot-wrap{
    clear: both;
    font-size: 0px;
    overflow: visible;
}
.om-label{
    position: relative;
    top: -12px;
    left:-10px;
    text-align: center;
    overflow: visible;
}

HTML的格式如下：

<div class="om-wrap">
    <div>
        <div class="time-end">&nbsp;</div>
        <div class="time-start">&nbsp;</div>
    </div>
    <div class="slot-wrap">
        <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                ...
        </div>
</div>

我在这里创建了一个JS小提琴：http://jsfiddle.net/GknLH/

我已经在互联网上搜索了解决方案，但由于我甚至找不到一个论坛帖子，看似简单的问题，我可能写错了，所以我很抱歉这是重复的。

Answer 1

您需要删除overflow: auto;的{{1}}。

检查此更新的DEMO

相对定位的文本被剪切，即使有可见的溢出

1 个答案: