使宽度与另一个 html 元素的大小相同
Posted
技术标签:
【中文标题】使宽度与另一个 html 元素的大小相同【英文标题】：make width the same size as another html element 【发布时间】：2011-03-14 14:24:23 【问题描述】：您好，我有一个下拉按钮，当您将其悬停时，它会下拉一些指向页面的链接。我希望这些链接的大小与按钮的宽度相同。
按钮大小是内容的 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" >
<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>
【问题讨论】：
【参考方案1】：三件事：
#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">。
【讨论】：
【参考方案2】：-
您有多个按钮 ID。为多个元素使用类。
您不应该只需要#button a display:block; ?没有视觉效果很难判断。
【讨论】：
以上是关于使宽度与另一个 html 元素的大小相同的主要内容，如果未能解决你的问题，请参考以下文章
列表中的最小交换元素使其与另一个列表相同并计算python中的交换