HTML/CSS: Kind-element, breiter als relativ positionierten Eltern
So, ich habe eine ungeordnete Liste, etwa so:
<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">
können, müssen breiter sein als die Eltern <li>
. Aber die Eltern <li>
muss position: relative;
als <ul class="child">
hat position: absolute
und nimmt eine left
Wert positioniert werden, die gegen die Eltern.
Ist hier das relevante 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;
}
Ich begreife, dass ich geben kann <ul class="child">
einen Satz Breite, die größer als die Eltern werden, aber ich möchte es so breit ist wie die größte Kind und nicht eine Feste Größe.
Weiß jemand wie das möglich ist?
Einem live-Beispiel der code im Einsatz haben, können hier gefunden werden: http://rcnhca.org.uk/sandbox/
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den absoluten DIV beziehen sich auf die Eltern der Breite..
Ich glaube, die Lösung ist durch die Arbeit an der
<li>
Elemente.Wenn Sie möchten, dass der text korrekt dargestellt wird, versuchen Sie, fügen
auf
#breadcrumbs ul#parent li ul li
Wird es verhindern, dass der text falsch.
Ändern der Breite von auto auf 100%.
ul
. Ich weiß, ich kann es tun, ohne jene, aber Sie sind notwendig.