li和父div大小不匹配

时间：2016-06-23 21:15:26

标签： html css

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

enter image description here

请提供解决方案。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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;
＆＃13;
＆＃13;

3 个答案:

答案 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; }
相关问题
最新问题