Ok guys, I give up. Here's the code I'm struggling with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Blah</title>
<style type="text/css">
#container {
margin: 0 auto;
width: 350px;
border: 1px solid #ccc;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline;
padding: 5px;
margin: 0 1px;
background-color: lime;
line-height: 2em;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>Element A</li>
<li>Element B</li>
<li>Element C</li>
<li>Element D</li>
<li>Element E</li>
<li>Element F</li>
</ul>
</div>
</body>
</html>
Why the heck does Chrome trim the right side of "Element D" (even though there is enough space to display whole item), while Firefox and even Internet Explorer render this code properly? It becomes more visible when we apply the commented border.
In other words, is there a way to tell the browser that I want every single <li> element to be autonomic, and thus to move it to the next row if it doesn't fit entirely in the previous one?
Can't wait to see the solution, thanks in advance.
