Question

当然这是一个简单的解决方案，但我正在试图解决它。我有一个带有大约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;
}

Answer 1

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

Answer 2

无需查看任何代码，我可以提出以下建议：

尝试

your_div {overflow:hidden;}

首先，

其次，只有一半的浏览器只观察到最小宽度。我建议尝试一种不同的方法来设置最小宽度，以及代码示例以获得最佳结果：）

重叠标签容器列出项目

2 个答案: