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

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-container添加约500px的固定宽度，则其中的水平列表有效。 我无法添加固定宽度，因为在我添加php时无法按预期工作。 我尝试使用除块以外的其他显示值，但没有办法解决。

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

抱歉，如果我说不通，我不是具有适当术语的专家...

有任何想法吗？

Answer 1

之所以将列表限制为该宽度，是因为从#vertimenu和ul.main-links li继承了宽度，该width: 150px;设置为width: 150px; 。

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

这是一个演示： http : //jsfiddle.net/rfeUe/

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

问题描述

1 个解决方案

解决方案1
0 2012-01-09 22:56:41

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

问题描述

1 个解决方案

解决方案1 0 2012-01-09 22:56:41

解决方案1
0 2012-01-09 22:56:41