Question

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

<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">可能需要比其父<li>更宽。但是，父<li>必须position: relative; <ul class="child"> position: absolute left，并且#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; }值可以与其父级对齐。

以下是相关的CSS：

<ul class="child">

我意识到我可以给{{1}}一个大于它的父级的设定宽度，但我希望它与最大的孩子一样宽，而且大小不固定。

有谁知道这是怎么回事？

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

Answer 1

绝对DIV将引用父母的宽度..

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

white-space: nowrap;

on #breadcrumbs ul#parent li ul li

它会阻止文本被错误地渲染。

Answer 2

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

#breadcrumbs ul #parent li ul {
width: 100%;} /* Change this width to 100% */

Answer 3

#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;}

HTML / CSS：子元素比相对定位的父元素宽

3 个答案: