包含水平列表的塊元素上的流體寬度

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