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">親よりも幅が必要な場合があります<li>。ただし、親は、その親に対して配置される値を持っている<li>必要があります。position: relative;<ul class="child">position: absoluteleft

関連する 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 に答える