CSS list: inline-block

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>List using inline-block</title>
    <style type="text/css">
body {
  font: normal 62.5%/1.5 verdana,sans-serif;
}

ul {
  width: 400px;
  display: block;
  line-height: 2;
}

li {
  display: inline-block;
  background: lightyellow;
  margin-right:8px;
}

.x {
  padding-left:2px;
  padding-right:2px;
  background:rgb(196,15,24); /*dark red*/
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  text-decoration:none;
  color:#fff;
}

.x span {
  position: relative;
  top:-2px;
}

.x:focus, .x:hover {
    background:red;
}
    </style>
    <!--[if lte IE 7]><style type="text/css">
li {
  display: inline;
  zoom:1;
}
    </style><![endif]-->
</head>
<body>
<h1>List of tags, thou can suppress them</h1>
<ul>
    <li><a href="#" class="txt">Biotechnology</a> <a href="#" title="Suppress the Biotechnology tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's&nbsp;tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">short</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">blah</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">abcdefgh</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">lorem ipsum</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
    <li><a href="#" class="txt">it's a nice tag</a> <a href="#" title="Suppress the --- tag" class="x"><span>x</span></a></li>
</ul>
</body>
</html>