1

我有一个 ul/li，其中每个 li 包含 2 个 div。其中一个 div （“类别”）可以包含可以换行的文本。我正在尝试使该 li 的另一个 div （“缩写”）具有相同的高度。由于父 li 正在拉伸，我在缩写上尝试了 height: 100% 但它没有拉伸到。

任何想法？

<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

4 回答 4

2

您可以使用上面 Danield 所说的 CSS 表格，也可以模拟您想要的效果：

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

我将蓝色背景和红色边框放在li标签中，并将白色背景放在“类别”类中。此外，将“类别”中的整个边框更改为border-left.

于 2013-10-01T10:20:59.637 回答
1

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

小提琴

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

}
于 2013-10-01T10:17:17.700 回答
0

正如其他人所说，

li a { display: block; }

应该达到你所追求的。但是您还必须从 the 中删除任何填充<li>并将其设置在 the<a>上。例如：

li { padding: 0; }
li a { display: block; padding: 1em; }
于 2013-10-01T04:08:47.883 回答
0

伙计们最后我得到了答案请检查这个.... 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;

}

脚本： -

$(文档).ready(函数() {

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

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

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

演示：--小提琴

于 2013-10-01T12:43:37.987 回答