如何将div拉到亲本的大小？
如何将div拉到亲本的大小？
提问于 2013-10-01 04:03:03
我有一个ul/li，其中每个li包含2div。其中一个div (“类别”)可以包含可以在多行上包装的文本。我试着让李的另一个div ("abbr")有相同的高度。由于父母李是伸展，我尝试了身高: 100%的abbr，但它没有伸展到。
有什么想法吗？
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr">ABC</div>
<div class="category">Very long or very shortshort</div>
</li>
</ul>我使用的css：
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}如果你想玩，这里有一把小提琴：http://jsfiddle.net/P6UzU/
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-10-01 10:17:17
您可以使用css表并删除float:左转到第一个div。
小提琴
CSS
ul {
list-style: none;
width: 200px;
display:table; /* <--- */
}
li
{
display:table-row; /* <--- */
}
div.abbr {
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
display:table-cell; /* <--- */
}
div.category {
/*float: left;*/ /* <--- removed */
padding: 16px;
border: 1px solid red;
margin-left:64px;
display:table-cell; /* <--- */
}Stack Overflow用户
发布于 2013-10-01 10:20:59
您可以像上面所说的那样使用CSS表，或者您可以按照您想要的效果模拟：
http://jsfiddle.net/P6UzU/3/
我在li标签中放置蓝色背景和红色边框，在“类别”类中放置白色背景。另外，将“类别”中的整个边框更改为border-left。
Stack Overflow用户
发布于 2013-10-01 04:08:47
就像其他人说的，
li a { display: block; }应该能达到你想要的目标。但是，您还必须从<li>中移除任何填充，并将其设置在<a>上。例如：
li { padding: 0; }
li a { display: block; padding: 1em; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19107742
复制相关文章
相似问题
腾讯云开发者
