重叠标签容器列表项目

当然，这是一个简单的解决方案，但我正在努力解决它。我有一个包含大约3个列表项的选项卡式容器，其中每个列表项都有超链接。当我缩小浏览器窗口的大小时[让我们从右边看]它不会将元素隐藏到最右侧，而是缩小列表项的大小，然后在其他两个列表项的宽度之下进行调整。重叠标签容器列表项目

我有最小宽度设置为相同的元素的宽度。

哪里需要调整？

这里是语义结构

<div id = "tabbed"> 
    <ul> 
    <li><a href = "#tab_1">Tab 1</a></li> <!-- 3 list items --> 
    </ul> 
    <div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item --> 
    </div> 
</div>

这里是CSS：

#tabbed 
{ 
width :80%; 
margin:auto; 
margin-top:20px; 
} 

#tabbed ul{ 
margin:0px; 
margin-top:15px; 
} 

#tabbed li 
{ 
display: inline-block; 
list-style-type:none; 
border:1px solid #ccc; 
border-bottom: 0px; 
border-top-left-radius:4px; 
border-top-right-radius:4px; 
margin-right:5px; 
margin-top:5px; 
padding:4px 4px 10px 4px; 
width: 30%; 
background:#87CEEB; 
} 

#tabbed a{ 
font-family:Arial, Helvetica, sans-serif; 
font-size: 13px; 
font-weight:bold; 
color: #7F818B; 
display:block; 
text-align:center; 
text-decoration:none; 
margin-top:5px; 
margin-bottom:5px; 
}

来源

2012-08-02 user1020069

发布您的代码或最好链接到现场示例会有所帮助。 – 2012-08-02 01:22:11

是的，请给我们一些例如HTML和CSS /样式，你在做什么。浏览器包装内容的方式很大程度上取决于实现。我假设你正在使用CSS显示：内联使列表水平？

来源

2012-08-02 01:27:29 Revent

使用display：inline-block将其设置为水平，出于某种原因显示：inline不完全按照它应该的方式运行，可能会覆盖我在此处使用的其他css样式表，但稍后我会着手... 。谢谢！ – user1020069 2012-08-02 18:37:47

我刚刚分享了CSS和语义标记 – user1020069 2012-08-02 18:38:18

没有任何代码来看看，我可以建议如下：

尝试

your_div {overflow:hidden;}

对于初学者来说，

其次，最小宽度仅仅由浏览器的一半了观察那里。我会建议尝试不同的方法来设置最小宽度，以及代码示例以获得最佳效果:)

来源

2012-08-02 02:28:11 FredTheWebGuy

nope，overflow：hidden并没有完全解决问题，您是否想看看我刚刚放入的代码并查看结果？ – user1020069 2012-08-02 18:35:42

重叠标签容器列表项目

回答

相关问题