haz que el ancho sea del mismo tamaño que otro elemento html

Hola, tengo un botón desplegable que cuando lo cierras, se despliegan algunos enlaces a las páginas. Quiero que esos enlaces tengan el mismo tamaño que el ancho del botón.haz que el ancho sea del mismo tamaño que otro elemento html

El tamaño del botón es 100% ancho del contenido, por lo que varía. ¿Cómo hago que el tamaño de los elementos desplegables sea del mismo tamaño que el botón con CSS?

<style type="text/css"> 
     #button { /* Box in the button */ 
     display: block; 
     width: 190px; 
     } 

     #button a { 
     text-decoration: none; /* Remove the underline from the links. */ 
     } 
ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
} 
li{ 
float:left; 
list-style-type: none; 
} 
     #button ul { 
     list-style-type: none; /* Remove the bullets from the list */ 
     } 

     #button .top { 
display:block; 
width:100%; 
font-weight:bold; 
color:#FFFFFF; 
background-color:#98bf21; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; /* The button background */ 
     } 

     #button ul li.item { 
     display: none; /* By default, do not display the items (which contains the links) */ 
     } 

     #button ul:hover .item { /* When the user hovers over the button (or any of the links) */ 
     display: block; 

     border: 1px solid black; 
     background-color: #6CC417; 
     } 
a:link,a:visited 
{ 
display:block; 
width:120px; 
font-weight:bold; 
color:#FFFFFF; 
background-color:#98bf21; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
a:hover,a:active 
{ 
background-color:#7A991A; 


} 
.container 
{ 
text-align:center; 
} 

.center_div 
{ 
border:1px solid gray; 
margin-left:auto; 
margin-right:auto; 
width:90%; 
background-color:#d0f0f6; 
text-align:left; 
padding:8px; 
} 

    </style> 
</head> 
<body bgcolor="#FFFFFF"> 

<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc"> 

<ul> 
<li> 
    <div id="button"> 
     <ul> 
     <li class="top">OtherOverflow Sites</li> 
     <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li> 
     <li class="item"><a href="http://superuser.com/">Visit superuser</a></li> 
     <li class="item"><a href="http://doctype.com/">Visit doctype</a></li> 
     </ul> 
    </div> 
</li> 
<li> 
    <div id="button"> 
     <ul> 
     <li class="top">OtherOverflow Sites</li> 
     <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li> 
     <li class="item"><a href="http://superuser.com/">Visit superuser</a></li> 
     <li class="item"><a href="http://doctype.com/">Visit doctype</a></li> 
     </ul> 
    </div> 
</li> 
</ul></p> 
<div class="container"> 
<div class="center_div"> 
<h1>Hello World!</h1> 
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p> 
</div> 
</div> 
</body>

Fuente

2010-07-12 SuperString

tres cosas:

#button ul:hover .item necesidades ancho establecido al 100%.

#button ul:hover .item {any of the links) */ 
    display: block; 
    width:100%; 
    border: 1px solid black; 
    background-color: #6CC417; 
    }

¡Todos los enlaces están configurados en 120px!
```
a:link,a:visited { 
    display:block; 
    width:120px; 
    ... 
```
Eliminar la width:120px;
Como dijo meder, No utilice un identificador, utilice una clase. Y el código tiene el mismo id varias veces, lo que es ilegal.

Así: <div id="button"> se vuelve: <div class="DropDwnMenuBtn">.

Fuente

2010-07-13 03:39:54

Brock Adams, el enlace está muerto, por favor actualícelo. – Farside

tiene varios identificadores de los botones. Usa clases para múltiples elementos.
En caso de que no necesite simplemente #button a {display: block; }? Es difícil saber cuándo no tienes visual.

Fuente

2010-07-12 00:27:38

haz que el ancho sea del mismo tamaño que otro elemento html

Respuesta

Cuestiones relacionadas