Chciałbym, żeby mój był zagnieżdżony <ul id="child"> dopasować do rodziców <il id="parent"> szerokość.
HTML:
<ul>
<li id="parent">
<a href="#" id="setter">$variable</a>
<ul id="child">
<li>one</li>
<li>two</li>
</ul>
</li>
</ul>
CSS:
#setter {padding:0 15px; display:inline-block} /*as menu item*/
#child {...?}
Problem polega na tym, że link ustawia wartość <li> szerokość, ponieważ tekst łącza jest zmienną zmienną. Innymi słowy, <li> szerokość nie może być naprawiona.
Odpowiedzi:
4 dla odpowiedzi № 1Możesz float temu <li>:
#parent
{
float: left;
}
Ale potem, jeśli zawartość w #child rośnie większy niż #setter, Szerokość <li> wzrośnie również:
W takim przypadku można następnie ustawić #child absolutnie:
#parent
{
float: left;
position: relative;
}
#child
{
position: absolute;
left: 0;
right: 0;
}
Ale potem, które mogą powodować problemy przepływu układu, (które mogą lub nie może być problem):
W czasie wykonywania (w przeciwieństwie do projektowania) z JavaScript, można ustawić stałą szerokość.Zmierzyć inline element szerokość, którego chcesz użyć i ustawić ją jako stała szerokość elementu nadrzędnego.
document.getElementById("parent").style.width =
document.getElementById("setter").offsetWidth + "px";
2 dla odpowiedzi nr 2
Wszystko, czego potrzebujesz, to
#child {margin: 0; padding: 0; }
i moze Szerokość: 100% Jeśli możesz "ve zestaw różnych szerokości gdzie indziej.
Również to "s <li> ("Element listy"), nie <il>. :-)
EDIT: Jeśli to jest pewien spadać w dół lista, należy otoczyć <a> w okolicy: sub ' anyway. Tutaj "s lepszy sposób, aby przejść:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul {list-style: none; margin: 0; padding: 0;}
#setter {background: red; display: block;}
#child {background: blue;}
</style>
</head>
<body>
<ul>
<li id="parent">
<a href="#" id="setter">$variable
<ul id="child">
<li>one</li>
<li>two</li>
</ul>
</a>
</li>
</ul>
</body>
</html>
1 dla odpowiedzi nr 3
Chciałbym zrobić tak:
#setter {
position:relative;
display:inline-block;
background:yellow;
padding:0 15px;
}
#child {
position:absolute;
background:red;
width:inherit;
}
może być konieczne dostosowanie padding.but, mam nadzieję, że masz pomysł.