Столик в элементе списка вызывает разрыв строки

Question

У меня есть простой фрагмент кода:

<ul> 
    <li> 
     <table> 
      <tr> 
       <td>construct</td> 
       <td> 
        <button>-</button> 
       </td> 
      </tr> 
     </table> 
    </li> 
</ul> 

Вещь, если смотреть в хроме <li> отображается на 2 строки вместо одной.

Там, кажется, новая линия/разрыв строки добавляется в <li> до <table> тега так вместо отображения:

* <table> 

Он показывает:

* 
<table> 

Если это имеет смысл ?!

Я пробовал множество комбинированных видов отображения и не могу понять, почему это происходит? Я знаю, что это связано с маркером отступа/списком, как при удалении, list-style-type:none, <li> будет отображаться правильно на 1 строке, но я не могу заставить его работать при использовании маркеров отступа?

Answer 1

Попробуйте добавить правило ниже, чтобы ваш CSS стиль для вашего стола (я советую использовать идентификатор или класс в тег, чтобы отличать его от других элементов таблицы)

table { 
    display:inline-table; 
    vertical-align:middle 
} 

Демо ниже

table { 
 
    display:inline-table; 
 
    vertical-align:middle 
 
}

<ul> 
 
    <li><table> 
 
      <tr> 
 
       <td>construct</td> 
 
       <td> 
 
        <button>-</button> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </li> 
 
</ul>

NB: испытания в хромовой версии 49.0.2623.108

Answer 2

Стиль таблицы по умолчанию имеет предел линии, предшествующий ей, вы можете использовать CSS для переопределения.

table { 
    display: inline-table; 
    vertical-align: text-top; 
} 

Обратите внимание, что существует различие между display: inline-block; и display: inline-table;, но для простой укладки он, будет иметь тот же эффект.

CSS Display Property
CSS Vertical-Align Property

Answer 3

Ok ребята, как всегда ... не мог бы сделать это без уг!

Вот что я собираюсь палка в моем универсальном файле CSS:

li > table{ 
    display:inline-table; 
    vertical-align:top; 
} 

Есть 5 полезной верт-х:

1, сверху.
2, text-top.
3, средний.
4, снизу.
5, text-bottom.

Хотя [1 & 2] & [ 5] практически одинаковы, каждый из них будет выровнять таблицу & маркера по отношению к <li>.