在css下拉列表上练习。在以下代码中,我将li
设置为块显示类型。现在我希望li
(灰色的父div .dropdown
内的绿色下拉列表)的大小与其父div .dropdown
的水平大小完全相同。在目前的情况下,它们的横向尺寸较小(请参阅下面的屏幕截图以便更好地理解)
请提供解决方案。
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
/* [disabled]background-color: rgba(255,0,0,1); */
display: block;
}
li {
display: block;
width: 100%;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
left: 0px;
top: 0px;
}
.dropdown a {
/* [disabled]color: rgba(0,255,0,1); */
display: block;
text-decoration: none;
list-style-type: none;
/* [disabled]background-color: rgba(204,51,153,1); */
width: 100%;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .dropdown{
visibility: visible;
}
.dropdown:hover{
visibility: visible;
}
.dropdown {
background-color: rgba(214,214,214,1);
max-width: 200px;
height: 100%;
max-height: 100px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 0px;
margin-top: 5px;
visibility: hidden;
list-style-type: none;
text-align: center;
}

<div class="wrapper">
<div class="content">
<div class="content-small">
Home
</div>
<ul class="dropdown">
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
</div>
</div>
</div>
&#13;
答案 0 :(得分:4)
将padding:0
添加到您的下拉列表<ul>
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
/* [disabled]background-color: rgba(255,0,0,1); */
display: block;
}
li {
display: block;
width: 100%;
background-color: rgba(0, 255, 0, 1);
border: thin solid rgba(0, 0, 0, 1);
position: relative;
margin-right: auto;
margin-left: auto;
left: 0px;
top: 0px;
}
.dropdown a {
/* [disabled]color: rgba(0,255,0,1); */
display: block;
text-decoration: none;
list-style-type: none;
/* [disabled]background-color: rgba(204,51,153,1); */
width: 100%;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .dropdown {
visibility: visible;
}
.dropdown:hover {
visibility: visible;
}
.dropdown {
background-color: rgba(214, 214, 214, 1);
max-width: 200px;
height: 100%;
max-height: 100px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 0px;
margin-top: 5px;
visibility: hidden;
list-style-type: none;
text-align: center;
padding:0;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
</div>
<ul class="dropdown">
<li><a href="">Home1</a>
</li>
<li><a href="">Home2</a>
</li>
</div>
</div>
</div>
列表项下方的灰色来自您在<ul>
答案 1 :(得分:4)
您的<ul class="dropdown">
有一些默认正在学习<ul>
标记,在这种情况下为padding-left:40px;
,然后是您提供的height
属性。尝试以下CSS:
.dropdown {
padding-left:0;
height:initial;
}
您也可以删除height
属性
答案 2 :(得分:1)
您是否为边距和/或填充尝试了CSS重置? UL是在默认浏览器CSS中应用了边距的HTML元素之一。
要快速修复,请尝试:
ul { margin: 0; padding: 0; }