使宽度与另一个 html 元素的大小相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3225148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make width the same size as another html element
提问by SuperString
Hi I have a dropdown button that when you hover it, it drops down some links to pages. I want those links to be the same size as the width of the button.
嗨，我有一个下拉按钮，当您将其悬停时，它会下拉一些指向页面的链接。我希望这些链接的大小与按钮的宽度相同。
The button size is 100% width of the content, so it varies. How do I make the size of the drop down items the same size as the button with CSS?
按钮大小是内容的 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>
采纳答案by Brock Adams
Three things:
三件事：
#button ul:hover .itemneeds width set to 100%.#button ul:hover .item {any of the links) */ display: block; width:100%; border: 1px solid black; background-color: #6CC417; }.
All links are set to 120px!
a:link,a:visited { display:block; width:120px; ...Delete the
width:120px;As meder said, Do not use an id, use a class. And the code has the same id multiple times -- which is illegal.
So:
<div id="button">becomes:<div class="DropDwnMenuBtn">.
#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">。
回答by meder omuraliev
- You have multiple button ids. Use classes for multiple elements.
- Shouldn't you just need #button a { display:block; }? It's hard to tell when you don't have a visual.
- 您有多个按钮 ID。为多个元素使用类。
- 你不应该只需要 #button a { display:block; }? 当你没有视觉时很难说。
