溢出可见无法正常工作并结合自动溢出属性

时间:2016-05-13 06:35:36

标签: html css html5 css3 overflow

这可能是个老问题。我在堆栈溢出中引用了许多链接,其中已经发布了相同的解决方案。但我找不到对我有用的东西。我已经读过overflow:visible在与自动属​​性结合时充当自动。我理解这些,但我需要一个解决方案来克服这一点。任何帮助将不胜感激。

我的页面中有一组标签,我将在标签onclick中添加一个活动类。这是一个JS的工作。不用担心我可以工作。我的问题是,overflow-y:visible似乎隐藏了活动状态的顶部边界。我需要它可见,并确保我的X轴应该有一个滚动。鉴于我的代码如下。要记下的类是tabs.activeTab:before

<div class="outer">
<div class="tabs activeTab">
    Tab1
</div>
 <div class="tabs">
    Tab2
</div>
<div class="tabs">
    Tab3
</div>
<div class="tabs">
    Tab4
</div>
<div class="tabs">
    Tab4
</div>

.outer{
    float: left;
    width: 45%;
    display: inline-block;
    overflow-x: auto;
    white-space: nowrap;
    background:#00adfc;
    overflow-y:visible;
     border:1px solid #00adfc;
}
.tabs{
  position:relative;
  padding:5px;
  text-align:center;
  display:inline-block;
  border-right:1px solid #fff
}
.tabs.activeTab:before{
  position:absolute;
  content:'';
  left:0;
  right:0;
  top:-3px;
  border-top:3px solid #fff;
}

另请参阅here

想要这样的东西[![在此输入图像描述] [1]] [1]

0 个答案:

没有答案