All geek questions in one place

Horizontal unordered list

I can do it in 5 seconds with a table, but I try to avoid it with CSS, it looks great in FF, but the problem is that it does not work in IE (the second li appears under the first one)

<ul style="list-style-type:none; margin:0px; padding:0px"> <li style="width:120px; display:table-cell; padding: 1px;"><?=$m['make']?></li> <li style="width:30px; display:table-cell; padding: 1px;"><input id="changemanufacturer" type="checkbox"></li> </ul>
+4
source share
2 answers

If you are using IE7 or IE8, make sure your DOCTYPE is present so that it does not appear in quirks mode.

Using HTML4 Strict or HTML5 DOCTYPES worked for me in IE8

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> <ul style="list-style-type:none; margin:0px; padding:0px"> <li style="width:120px; display:table-cell; padding:1px;">asdf</li> <li style="width:30px; display:table-cell; padding: 1px;"> <input id="changemanufacturer" type="checkbox"> </li> </ul> </body> </html>

HTML5: <!DOCTYPE html>

+3
source

Do not use a table cell. At:

 <li style="width:120px; display:inline; float:left;">Boo!</li>

Of course, you should have the appearance of CSS, but I assume this will just simplify the question.

+10
source

Source: https://habr.com/ru/post/1343970/

More articles:


All Articles