<tr> не занимает высоту потомка <span>

Этот <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>

Текущая таблица:

Желаемая Таблица:

источник

2017-02-15 Brian

можно ли редактировать в полном рабочем EXA mple? Трудно понять, что вы имеете в виду без фактического генерируемого/отображаемого кода HTML/CSS. См. [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve). – showdev

Попробуйте добавить 'display: inline-block' в стиль span –

Это выглядит как класс .mdl_checkbox имеет фиксированную высоту 24px (material.indigo-pink.min.css). Этот класс применяется к элементу <label>. Превращение этого стиля, казалось, помогло.

Но я не уверен, как это повлияет на другие элементы. Возможно, «Material Design Lite» обеспечивает более интегрированное решение, а не просто отменяет существующие стили.

label.mdl-checkbox { 
 
    height: auto; 
 
}

<link href="//code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 
<script defer src="//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>

источник

2017-02-15 20:45:53 showdev

Во-первых, добавить overflow:hidden к <tr>, чтобы скрыть перелива содержание, и если вам нужно хранить содержимое внутри е строки, попробуйте следующее:

label { 
    display: flex; 
    flex-wrap: nowrap; 
} 

label .mdl-checkbox__input { 
    flex-basis: 20%; 
} 

label .mdl-checkbox__label { 
    flex-basis: 80%; 
    overflow: hidden; 
    text-overflow: ellipsis; //will cut the word with ..., if it too long 
    line-height: //your value 
}

источник

2017-02-15 20:25:28

< этикетки >, < пролет > элементы инлайн свойство. Таким образом, они не могут иметь свойство блокировки, например <p>. Пожалуйста, смотрите < этикетку > спецификации here и < срок > спецификации here

Вы должны сначала исправить элементы, а затем дать отступы или высоту в < пролете > затем дать «дисплей: встроенный блок» в < пролете >

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>

источник

2017-02-15 21:02:01 Victoria

<tr> не занимает высоту потомка <span>

ответ

Смежные вопросы