李和父母大小不匹配 [英] li and parent div size mismatch

问题描述

在css下拉练习。在下面的代码中，我将 li 设置为块显示类型。现在我希望 li 的大小（灰色父母div .dropdown 中的绿色下拉列表的大小）为与其父母div .dropdown 完全相同。在目前的情况下，它们的横向尺寸较小（请参阅下面的屏幕截图以更好地理解）

请提供解决方案。

  html，body {margin：0px;身高：100％;宽度：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）;文字修饰：无; / * [禁用] background-color：rgba（255,0,0,1）; * / display：block;} li {display：block;宽度：100％; background-color：rgba（0,255,0,1）; border：thin solid rgba（0,0,0,1）;位置：相对; margin-right：auto; margin-left：auto; left：0px; top：0px;}。dropdown a {/ * [disabled] color：rgba（0,255,0,1）; * / display：block;文字修饰：无; 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;最大宽度：960px; margin-left：auto; left：0px; top：0px; background-color：rgba（204,204,204,1）; margin-right：auto;位置：相对; padding：0px; margin-top：0px;}。content {position：relative;盒子尺寸：边框;身高：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;身高：100％; max-height：50px; background-color：rgba（0,255,204,1）;位置：相对; 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）;最大宽度：200px;身高：100％; max-height：100px;位置：相对; margin-right：auto; margin-left：auto; top：0px; margin-top：5px;知名度：隐藏; list-style-type：none; text-align：center;}  

< div class = 包装 > < div class =content> < div class =content-small>首页< / div> < ul class =dropdown>< li>< a href => Home1< / a>< / li>< li>< a href => ;< /锂> < / DIV> < / div>< / div>

解决方案

< ul class =dropdown> 对< ul> 标记，在这种情况下， padding-left：40px; ，然后选择 height 属性它。尝试下面的CSS：

  .dropdown {
 padding-left：0; 
身高：初始; 
} 
  

您也可以删除 height 属性

practicing on css dropdown. In the following code, I have set the li as block display type. Now I want the size of the li (the green dropdown ones inside the grey colored parent div .dropdown) to be exactly the same horizontal size as of their parent div .dropdown . In the current case, their horizontal size is smaller (please see the screenshot below to understand better)

Kindly please provide a solution.

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>

解决方案

Your <ul class="dropdown"> has some default studying for a <ul> tag in it, in this case padding-left:40px; and then the height attribute you gave it. try the following CSS:

.dropdown {
padding-left:0;
height:initial;
}

You can also just remove the height attribute

这篇关于李和父母大小不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！