너비가 다른 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로 설정됩니다. MEDER 말했듯이
```
a:link,a:visited { 
    display:block; 
    width:120px; 
    ... 
```
는 ID를 사용하는 클래스를 사용하지 마십시오 width:120px;
을 삭제합니다. 그리고 코드는 여러 번 동일한 ID를가집니다. 이는 불법입니다.

따라서 : <div id="button">은 <div class="DropDwnMenuBtn">이됩니다.

출처

2010-07-13 03:39:54

브록 아담스, 링크가 죽었습니다. 업데이트하십시오. – Farside

은 여러 버튼의 ID를 가지고있다. 여러 요소에 대해 클래스를 사용하십시오.
#button이 필요하지 않습니다. {display : block; }? 비주얼을 가지고 있지 않다는 것을 말하기는 어렵습니다.

출처

2010-07-12 00:27:38

너비가 다른 html 요소와 동일한 크기로 만들었습니다.

답변

관련 문제