CSS: горизонтальный UL, где LI содержит таблицу. Возможно?

Я пытаюсь исправить ужасный макет вложенной таблицы для сайта. Страница будет иметь переменное количество элементов, которые используют диаграммы Google. Вместо сложного кода спагетти, который пытается выложить вещи внутри ячеек таблицы, я хочу использовать горизонтальный UL, чтобы блоки содержимого были выложены чисто независимо от диаграмм. Проблема в том, что компоненты Google charts используют таблицы. Когда элемент таблицы существует в любом месте внутри LI, LI перемещается к следующему строка (предполагая, что элементы таблицы по умолчанию имеют новую строку до и после).

Я пробовал различные режимы отображения для таблицы не повезло. Это безнадежное дело?

пример HTML-кода для иллюстрации проблемы:

<html>
<body>
<style type='text/css'>
 #navlist li{
    display:inline;
    list-style-type:none;

    }
</style>
    <ul id='navlist'>
        <li>TEST</li>
        <li>TEST2</li>
        <li>
            <table style='border:1px solid black'><tr><td>TEST</td></tr></table>
        </li>
        <li>TEST3</li>
        <li>
            <table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
        </li>
        <li>
            <table style='border:1px solid green'><tr><td>TEST</td></tr></table>
        </li>
    </ul>
</body>
</html>
6
css horizontallist html html-table

4 ответов

Set display: inline-block; на ваших элементах LI; это должно сделать это красиво. Он действительно не работает в Firefox 2,но никто больше не использует Firefox 2. Вам нужно будет указать doctype, чтобы заставить его работать в IE.

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      #navlist li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        list-style-type: none;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <ul id='navlist'>
      <li>TEST</li>
      <li>TEST2</li>
      <li>
        <table style='border:1px solid black'><tr><td>TEST</td></tr></table>
      </li>
      <li>TEST3</li>
      <li>
        <table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
      </li>
      <li>
        <table style='border:1px solid green'><tr><td>TEST</td></tr></table>
      </li>
    </ul>
  </body>
</html>
5

Ну, это кажется слишком простым, чтобы быть правдой, но я попробовал, и это сработало в FF. IE по-прежнему отображает половину тегов во второй строке, но это может быть простое исправление. Все, что я сделал, это добавил float: left к стилям для трех таблиц.

<html>
    <body>
    <style type='text/css'>
     #navlist li{
        display:inline;
        list-style-type:none;
        float: left;

        }
    </style>
        <ul id='navlist'>
            <li>TEST1</li>
            <li>TEST2</li>
            <li>
                <table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>TEST3</li>
            <li>
                <table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>
                <table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
            </li>
        </ul>
    </body>
    </html>
0

Да это потому, что таблицы по умолчанию являются элементами блока (ну, на самом деле display:table но он действует аналогичным образом). Если ваши таблицы очень просты, добавьте display:inline к ним может работать.

В противном случае ваш лучший выбор-плавать каждый элемент списка влево:

#navlist li {
  float: left;
  list-style-type:none;
}
0

Я бы предложил применить набор стилей типа раскрывающегося меню к вашему дисплею, это имеет недостаток в том, что немного усложняет вашу разметку, но облегчает скрытие/отображение таблиц в соответствующее время. Он также позволяет иметь больше, чем таблицы с одной строкой/одной ячейкой.

Если вам нужно, чтобы они были видны все время, то этот подход неприменим. Несмотря на это, я опубликовал демо моего предложения наjsbin.com

0