сделать ширину того же размера, что и другой элемент html

Привет, У меня есть кнопка выпадающего списка, которая, когда вы его наводите, уменьшает некоторые ссылки на страницы. Я хочу, чтобы эти ссылки были того же размера, что и ширина кнопки.сделать ширину того же размера, что и другой элемент html

Размер кнопки составляет 100% ширины содержимого, поэтому он варьируется. Как сделать размер выпадающих элементов того же размера, что и кнопка с 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>

источник

2010-07-12 SuperString

три вещи:

#button ul:hover .item потребности ширина устанавливается на 100%.

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

Все ссылки предназначены для 120px!
```
a:link,a:visited { 
    display:block; 
    width:120px; 
    ... 
```
Удалить width:120px;
Как сказал Медер, не используйте идентификатор, используйте класс. И код имеет один и тот же идентификатор несколько раз, что является незаконным.

So: <div id="button"> будет: <div class="DropDwnMenuBtn">.

источник

2010-07-13 03:39:54

Brock Adams, ссылка мертва, пожалуйста, обновите ее. – Farside

У вас есть несколько идентификаторов кнопок. Используйте классы для нескольких элементов.
Вам не нужно просто # button {display: block; }? Трудно сказать, когда у вас нет визуального.

источник

2010-07-12 00:27:38

сделать ширину того же размера, что и другой элемент html

ответ

Смежные вопросы