Question

我有一个ul / li，其中每个li包含2个div。其中一个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/

Answer 1

你可以像上面的Danield所说的那样使用CSS表格，或者你可以模拟你想要的效果：

http://jsfiddle.net/P6UzU/3/

我将蓝色背景和红色边框放在li标签中，白色背景放在＆＃34;类别＆＃34;类。此外，更改＆＃34;类别＆＃34;中的整个边框。到border-left。

Answer 2

您可以使用css表并删除第一个div上的float：left

<强> FIDDLE

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; /* <--- */

}

Answer 3

正如其他人所说，

li a { display: block; }

应该实现你所追求的目标。但您还必须从<li>中移除任何填充，并将其设置在<a>上。例如：

li { padding: 0; }
li a { display: block; padding: 1em; }

Answer 4

伙计们最后我得到答案plz chk这.... HTML代码： -

<ul>
<li>
    <div class="abbr">ABC</div>
    <div class="category">Long or short</div>
</li>
<li>
    <div class="abbr1">ABC</div>
    <div class="category1">Very long or very shortshort & 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;

}
div.abbr1 {
 float: left;
 padding: 16px;
 border: 1px solid red;
 width: 30px;
 background: blue;
    text-align: center;
}

div.category1 {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;

}

脚本： -

$（document）.ready（function（）{

var rightHeight = $('.category1').height();

$('.abbr1').css({'height':rightHeight});

要解决这个问题，你必须添加jquery/1.8.2 ..

演示： - Fiddle

如何将div拉伸到父李的大小

4 个答案:

CSS