html - <tr> 不取后代 <span> 的高度

这<tr>没有考虑后代的高度<span>并且一些文本溢出到下一行。如何使该行扩展以包含文本和标题？

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-red.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<table class="mdl-data-table">
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p>
            <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

当前表:

所需表:

最佳答案

, 元素是内联属性。所以他们不能有像

这样的 block 属性。请查看 <标签> 规范 here和规范 here

你需要先固定元素，然后在中给出 padding 或 height 然后在中给出 'display:inline-block'

label{
  display:block;
  padding:20px 0;
}
.mdl-checkbox__label{
  display:inline-block;
  vertical-align:top;
}

.mdl-typography--body-1{
  display:block;
  padding:0 0 20px;
}
.mdl-typography--caption{
  display:block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table class="mdl-data-table" border=1>
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <span class="mdl-typography--body-1 mdl-typography--text-left" >
              Barack H. Obama
            </span>
            <span class="mdl-typography--caption mdl-typography--text-left" >
              Democratic
            </span>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

关于html - <tr> 不取后代 <span> 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42258932/

html - <tr> 不取后代 <span> 的高度

上一篇：html - CSS3 导航按钮动画

下一篇：javascript - 使用 HTML/PHP/AJAX 将行插入数据库