3

所以我有一个像这样的无序列表：

<nav id="breadcrumbs">
        <a href="#" id="home"></a>
        <ul id="parent">
            <li><a href="#">Health, Safety and Security</a>
                <ul class="child">
                    <li><a href="#">Getting started</a></li>
                    <li><a href="#">Communication</a></li>
                    <li><a href="#">Personal and people development</a></li>
                    <li><a href="#">Quality</a></li>
                    <li><a href="#">Equality, diversity and rights</a></li>
                    <li><a href="#">Clinical skills</a></li>
                    <li><a href="#">Additional materials</a></li>
                </ul>
            </li>
            <li><a href="#">Infection control</a>
                <ul class="child">
                    <li><a href="#">Record keeping</a></li>
                    <li><a href="#">Confidentiality and consent</a></li>
                    <li><a href="#">Protecting vulnerable people</a></li>
                    <li><a href="#">Workplace safety and security</a></li>
                </ul>
            </li>
            <li><a href="#">Hand hygiene</a></li>
        </ul>
    </nav>

<ul class="child">可能需要比它的 parent 更宽<li>。但是，父级<li>必须具有position: relative;原样<ul class="child">并position: absolute采用一个left值来定位其父级。

这是相关的CSS：

#breadcrumbs ul#parent {
    height: 39px;
    width: 905px;
    float: right;
    position: relative;
    background: #f38630;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    line-height: 39px;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
}

#breadcrumbs ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}

#breadcrumbs ul#parent li ul {
    position: absolute;
    width: auto;
    left: -5px;
    top: 42px;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    height: 25px;
    margin: 0 3px 3px 3px;
    padding: 0 15px;
    line-height: 25px;
}

我意识到我可以给<ul class="child">一个比它的父级更大的宽度，但我希望它和最大的孩子一样宽，而不是固定的大小。

有谁知道这怎么可能？

可以在此处找到正在使用的代码的实时示例：http ://rcnhca.org.uk/sandbox/

4

3 回答 3

6

绝对 DIV 将参考父母的宽度..

我认为解决方案是通过处理<li>元素。如果您希望文本正确呈现，请尝试添加

white-space: nowrap;

在#breadcrumbs ul#parent li ul li

它将防止文本被错误地呈现。

于 2012-04-13T09:30:36.497 回答
1

将宽度从自动更改为 100%。

#breadcrumbs ul #parent li ul {
width: 100%;} /* Change this width to 100% */
于 2012-04-13T09:39:11.970 回答
0 
#breadcrumbs ul #parent li ul {
margin-left: 0;
padding-left: 0;
top: 42px;
width: auto;}

#breadcrumbs ul#parent li {
float: left;
height: 39px;
line-height: 39px;
min-width: 1px;
position: relative;}
于 2012-04-13T09:26:27.127 回答