0

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

2 回答 2

0

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

尝试

your_div {overflow:hidden;}

对于初学者，

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

于 2012-08-02T02:28:11.707 回答
0

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

于 2012-08-02T01:27:29.467 回答