Question

我有问题。在PHP脚本上工作，我必须首先正确地使用HTML / CSS。我的目标是编写一个垂直菜单，显示一个水平列表子菜单，其中包含更多垂直菜单列表。

我遇到的问题是我的块元素的水平列表不会出现水平，除非我向块元素添加固定宽度。有办法吗？

示例文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#vertimenu {
    width: 150px;
    font-size: 0.75em;
}
ul.main-links {
    background: none;
}
ul.main-links li {
    background: #999;
    margin-bottom: 1px;
    list-style: none;
    width: 150px;
}
ul.main-links li:hover {
    background: #ccc;
    position: relative;
}
ul.main-links li div.sub-container {
    background: #ccc;
    display: none;
    margin: 0;
    padding: 5px 5px 5px 0;
}
ul.main-links li:hover div.sub-container {
    background: #999;
    display: inline-table;
    position: absolute;
    top: 0;
    left: 150px;
}
ul.sub-categories {
    margin: 0 0 0 5px;
    padding: 0;
}
ul.sub-categories li{
    float: left;
    list-style: none;
    display: inline;
    text-align: center;
    background: #ccc;
    margin: 0 0 1px 0;
}
ul.sub-links {
    margin: 0;
    padding: 0;
    background: none;
}
ul.sub-links li{
    list-style: none;
    margin: 0;
    padding: 0;
    background: #999;
}
</style>

</head>

<body>

<div id="vertimenu">
    <ul class="main-links">
        <li><a href="#">Home</a>
            <div class="sub-container">
                <ul class="sub-categories">
                   <li>Category A
                       <ul class="sub-links">
                         <li><a href="#">Sub Menu Item 1</a></li>
                         <li><a href="#">Sub Menu Item 2</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                       </ul>
                   </li>
                   <li>Category B
                       <ul class="sub-links">
                         <li><a href="#">Sub Menu Item 1</a></li>
                         <li><a href="#">Sub Menu Item 2</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                       </ul>
                   </li>
                   <li>Category C
                       <ul class="sub-links">
                         <li><a href="#">Sub Menu Item 1</a></li>
                         <li><a href="#">Sub Menu Item 2</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                         <li><a href="#">Sub Menu Item 3</a></li>
                       </ul>
                    </li>
                 </ul>
            </div>
        </li>
    </ul>
</div>

</body>
</html>

如果向.sub容器添加大约500px的固定宽度，则其中的水平列表可以正常工作。我不能添加一个固定的宽度，因为当我添加我的PHP时它不会按预期工作。我尝试使用除了块之外的其他显示值，但没有一个可以做到。

我想我可以在我的display：block元素中使用表而不是水平列表，但是如果可能的话我想避免使用它，因为它不是真正的管状数据。编辑：使用表格与水平列表存在相同的问题，因此无法正常使用。

对不起，如果我没有意义，我不是一个有正确术语的专家......

有什么想法吗？

Answer 1

列表被限制在该宽度的原因是因为继承了#vertimenu和ul.main-links li的宽度，该宽度设置为width: 150px;。

删除这些设置的宽度，并改为ul.main-links li宽度为150px。

以下是演示：http://jsfiddle.net/rfeUe/

包含水平列表的块元素上的流体宽度

1 个答案: