为什么用转换行内元素的方法，li总是与ul右对齐
<html>
<head>
<style type="text/css">
div{border:1px solid red;text-align:center;}
ul{border:1px solid red;display:inline}
li{display:inline}</style>
</head>
<body>
<h4>一个无序列表：</h4>
<div>
<ul>
<li>茶</li>
</ul>
</div>
</body>
</html>
li元素并不水平居中，而是与ul右对齐
