Question

是否可以仅使用CSS填写<li>标签的高度？

中间列文字比两侧更长，所以我需要在需要时增加它们的高度。

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>

如何填写列表标签中的高度？

1 个答案: