Geek Answers Handbook

CSS: horizontal UL, where LI contains TABLE. Possible?

I am trying to fix a copied table of nested tables for a site. The page will have a variable number of elements that use Google charts. Instead of complex spaghetti code that tries to lay out things inside the table cells, I want to use horizontal UL, so the content blocks will be laid out clean, regardless of the diagrams used. The problem I am having is using the charting component tables of Google. When a table element exists somewhere inside the LI, the LI moves to the next row (it is assumed that the table elements by default have a new row before and after).

I tried various display modes for a table with no luck. Is this a lost thing?

Sample HTML code to illustrate the problem:

  <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
html css html-table
source share
4 answers

Set display: inline-block; to your LI items; it should make it beautiful. It really doesn't work in Firefox 2, but nobody else uses Firefox 2. You need to specify doctype to make it work in 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
source share

Well, that seems too easy to be true, but I tried and it worked in FF. IE still displays half the tags in the second line, but this could be a simple fix. All I did was add a float: leave styles for three tables.

 <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
source share

Yes, because tables are by default elements of a block (well, actually display:table , but it acts in a similar way). If your tables are very simple, then adding display:inline to them might work.

Otherwise, it is best to swim with each list item on the left:

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

I would suggest applying a set of styles to the style, such as a drop-down menu, this does not complicate your layout so badly, but makes it easier to hide / show tables at the appropriate time. It also allows you to have tables with more than one row / single cell.

If you need them to be visible at all times, then this approach is not applicable. Despite this, I posted a demo of my jsbin.com offer

0
source share

More articles:


All Articles