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

Question

I have a problem. 我有个问题。 Working on a php script, I must first get the HTML/CSS down right. 在使用php脚本时，我必须首先正确设置HTML / CSS。 My goal is to write a vertical menu, that shows a horizontal list sub menu, containing more vertical menu lists. 我的目标是编写一个垂直菜单，该菜单显示一个水平列表子菜单，其中包含更多垂直菜单列表。

The problem I'm having is my horizontal list with my block element will not appear horizontal, not unless I add a fixed width to the block element. 我遇到的问题是，带有块元素的水平列表不会显示为水平，除非我向块元素添加固定宽度。 Is there a way around that? 有办法解决吗？

Sample Document: 样本文件：

<!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>

If you add a fixed width of about 500px to the .sub-container, then the horizontal list within it works. 如果您向.sub-container添加约500px的固定宽度，则其中的水平列表有效。 I cannot add a fixed width because it wouldn't work as intended when I add in my php. 我无法添加固定宽度，因为在我添加php时无法按预期工作。 I tried using other display values besides block, but none do the trick. 我尝试使用除块以外的其他显示值，但没有办法解决。

I suppose I could use a table instead of a horizontal list within my display:block element, but I would like to avoid that if possible because it's not really tubular data. 我想可以在display：block元素中使用表格而不是水平列表，但是如果可能的话，我想避免这种情况，因为它不是真正的管状数据。 EDIT : using a table has the same issue as the horizontal list, so that won't work properly either. 编辑：使用表与水平列表具有相同的问题，因此也将无法正常工作。

Sorry if i don't make sense, I'm not an expert with proper terminology... 抱歉，如果我说不通，我不是具有适当术语的专家...

Any ideas? 有任何想法吗？

Answer 1

The reason why the lists are being constrained to that width is because is inheriting the width from #vertimenu and ul.main-links li , which is set to width: 150px; 之所以将列表限制为该宽度，是因为从#vertimenu和ul.main-links li继承了宽度，该width: 150px;设置为width: 150px; . 。

Remove those set widths and give ul.main-links li a width of 150px instead. 删除这些设置的宽度，并为ul.main-links li提供150px的宽度。

Here's a demo: http://jsfiddle.net/rfeUe/ 这是一个演示： 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