Вопросы Теги

сделайте ширину тем же размером как другой элемент 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>
10
задан SuperString 12 July 2010 в 00:09
поделиться

2 ответа

Три вещи:

  1. #button ul: hover .item требует установки ширины 100%. 

      #button ul: hover .item {любая ссылка) * /
дисплей: блок;
ширина: 100%;
граница: сплошной черный 1px;
цвет фона: # 6CC417;
 }

    .

  2. Все ссылки имеют размер 120 пикселей! 

     a: ссылка, a: посетил {
дисплей: блок;
ширина: 120 пикселей;
 ...

    Удалите width: 120px;

  3. Как сказал Медер, не используйте идентификатор, используйте класс. И код имеет один и тот же идентификатор несколько раз, что является незаконным.

    Итак:

    становится:
    .

3
ответ дан 4 December 2019 в 04:01
поделиться
  1. У вас несколько идентификаторов кнопок. Используйте классы для нескольких элементов.
  2. Разве вам не нужно просто #button a { display:block; }? Трудно сказать, когда у вас нет визуального представления.
1
ответ дан 4 December 2019 в 04:01
поделиться