使寬度與另一個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;

正如MEDER說，不要用一個id，使用類。代碼多次具有相同的ID - 這是非法的。因此：<div id="button">變爲：<div class="DropDwnMenuBtn">。

來源

2010-07-13 03:39:54

Brock Adams，鏈接已經死了，請更新它。 – Farside 2016-07-21 15:29:01

您有多個按鈕的ID。使用多個元素的類。
你不應該只需要#button a {display：block; }？很難說什麼時候你沒有視覺效果。

來源

2010-07-12 00:27:38

使寬度與另一個html元素的寬度相同

回答

相關問題