html - 如何在列表标签​​中填充高度？

Question

是否可以填一个<li>的高度仅使用 CSS 标记？

中心栏文本有时比两侧长，因此我需要在需要时增加它们的高度。

这是我的代码:http://jsfiddle.net/U8WaH/16/

CSS:

.table {
    margin: 0 auto;
}
.table ul li {
    margin: 0;
    padding: 5px 10px;
    list-style: none;
    border: 1px solid #C9C9C9;
    vertical-align: top;
}
.table ul li.title {
    font-weight: bold;
}
.table ul li.delete, .table ul li.delete input[type=checkbox] {
    width: 20px;
}
.table ul li.result.delete {
    padding: 5px 10px;
}
.table input[type=submit] {
    float: left;
    width: auto;
    height: 29px;
    margin-top: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.table ul li.title, .table ul li.result {
    display: inline-block;
}
.table ul li.last_replier {
    width: 140px;
}
.table ul li.subject {
    width: 315px;
}
.table ul li.status, .table ul li.category {
    width: 120px;
}
.table a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.list-emails-table {
    width: 900px;
}
.list-emails-table ul li.status {
    width: 80px;
}​

HTML:

<div class="table list-emails-table">
  <ul><li class="title delete">&nbsp;</li><li class="title category">Category</li><li class="title last_replier">Last Replier</li><li class="title subject">Subject</li><li class="title status">Status</li></ul>
  <ul><li class="result delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></li><a href=""><li class="result category">Info</li><li class="result last_replier">Somebodys Name</li><li class="result subject">Short Text</li><li class="result status">Status Here</li></a></ul>
  <ul><li class="result delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></li><a href=""><li class="result category">Info</li><li class="result last_replier">Somebodys Name</li><li class="result subject">Long Text - Long Text - Long Text - Long Text - Long Text - Long Text</li><li class="result status">Status Here</li></a></ul>
  <ul><li class="result delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></li><a href=""><li class="result category">Info</li><li class="result last_replier">Somebodys Name</li><li class="result subject">Short Text</li><li class="result status">Status Here</li></a></ul>
</div>

Answer 1

快速破解和修复解决方案(只需在列表中查找并替换您的列表，并将其替换为真实的表格)。使用 display: table 可以达到同样的效果, display: table-row , 和 display: table-cell ，而是一个 <table>在这种情况下更具语义。

http://jsfiddle.net/U8WaH/17/

.table {
    margin: 0 auto;
}
.table tr td {
    margin: 0;
    padding: 5px 10px;
    list-style: none;
    border: 1px solid #C9C9C9;
    vertical-align: top;
}
.table tr td.title {
    font-weight: bold;
}
.table tr td.delete, .table tr td.delete input[type=checkbox] {
    width: 20px;
}
.table tr td.restrt.delete {
    padding: 5px 10px;
}
.table input[type=submit] {
    float: left;
    width: auto;
    height: 29px;
    margin-top: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.table tr td.last_reptder {
    width: 140px;
}
.table tr td.subject {
    width: 315px;
}
.table tr td.status, .table tr td.category {
    width: 120px;
}
.table a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}
.tdst-emails-table {
    width: 900px;
}
.tdst-emails-table tr td.status {
    width: 80px;
}

<table class="table tdst-emails-table">
  <tr><td class="title delete">&nbsp;</td><td class="title category">Category</td><td class="title last_reptder">Last Reptder</td><td class="title subject">Subject</td><td class="title status">Status</td></tr>
  <tr><td class="restrt delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></td><td class="restrt category">Info</td><td class="restrt last_reptder">Somebodys Name</td><td class="restrt subject">Short Text</td><td class="restrt status">Status Here</td></tr>
  <tr><td class="restrt delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></td><td class="restrt category">Info</td><td class="restrt last_reptder">Somebodys Name</td><td class="restrt subject">Long Text - Long Text - Long Text - Long Text - Long Text - Long Text</td><td class="restrt status">Status Here</td></tr>
  <tr><td class="restrt delete"><input type="checkbox" name="action[]" id="checkbox[]" value=""></td><td class="restrt category">Info</td><td class="restrt last_reptder">Somebodys Name</td><td class="restrt subject">Short Text</td><td class="restrt status">Status Here</td></tr>
</table>