Question

我正在尝试使用以下CSS来降低表格单元格的高度，但它无法正常工作。

.table tr>td.vert-align{
    vertical-align: middle;
    height: 5px;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #eaebec;
}

这是我的HTML代码：

<td class="vert-align">
  {% if post.url %}
  <h4><a href="{{ post.url }}" style="margin-left: 15px;"> <img src="{{post.image}}" height="70" width="70"/>
{{ post.title }}</a><span style="margin-left: 15px;" class="domain">
({{ post.domain }})</span></h4>
{% else %}
  <h4><a href="{% url 'post' post.slug %}" style="margin-left: 15px;">{{ post.title }}</a><span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
  <ol class="post-info">
    <div class="btn-group btn-breadcrumb">
      <span class="btn btn-default">{{ post.moderator.username }</span>
      <span class="btn btn-default">{{ post.pub_date | date }}</span>
      <span class="btn btn-default">{{post.views}}</span>
      <a href="{% url 'post' post.slug %}" class="btn btn-default">discuss</a>
      <a href="{{ c.get_absolute_url }}" class="btn btn-default">{{post.category}}</a>
   </div>
  </ol>
</td>

我试图在一行中很好地显示标题/图片/域名，但是现在桌子的高度太长，看起来很奇怪。我试过身高：5px，但它不会工作

Answer 1

我看到你的代码中没有使用表格，但问题可能是因为你有一个＆＃34; .table＆＃34;选择器而不是＆＃34;表＆＃34;选择。
Dot表示classname，no dot表示html标记。请看一下，如果这不是你的整个HTML代码的答案，以便更好地查看它。

Answer 2

您已经为td上课了，所以请直接在您的选择器中使用它。

.vert-align{
    vertical-align: middle;
    height: 5px;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #eaebec;
}

<强>更新

降低td内部图像的高度，以降低单元格的高度。

我怎样才能降低细胞的高度？

2 个答案: