使宽度与另一个 html 元素的大小相同

发布于 2024-09-08 21:03:21 字数 3031 浏览 2 评论 0原文

您好，我有一个下拉按钮，当您将其悬停时，它会下拉一些页面链接。我希望这些链接的大小与按钮的宽度相同。

按钮大小是内容的 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>

原文

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?

    <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滥情哥ㄟ 2024-09-15 21:03:21

三件事：

#button ul:hover .item 需要将宽度设置为 100%。

 #button ul:hover .item {任何链接) */
    显示：块；
    宽度：100%；
    边框：1px 纯黑；
    背景颜色：#6CC417；
  }

所有链接都设置为 120px！

a:链接,a:访问过 {
  显示：块；
  宽度：120px；
  ...

删除width:120px;

正如 meder 所说，不要使用 id，使用类。并且该代码多次具有相同的 id —— 这是非法的。
因此：
变为：
。

Three things:

#button ul:hover .item needs 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">.