给定以下简单的页面,其示出了一个无序列表:为什么文本在列表项中不对齐?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Day Picker</title>
<style>
* { margin: 0; }
html, body { height: 100%; }
.unordered-list
{
height: 100%;
margin: 0 auto;
width: 75%;
text-align: center;
list-style-type: none;
}
.unordered-list li
{
background: red;
float: left;
height: 33%;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function initializeUnorderedList(unorderedList)
{
// initialize layout
var items = unorderedList.querySelectorAll("li");
var blockIndices = [];
$(items).each(function(index, element)
{
if ($(element).hasClass("block"))
blockIndices.push(index);
});
blockIndices.push(items.length);
for (var i = 0, j = 0; i < blockIndices.length - 1; ++i)
{
var width = 100/(blockIndices[i + 1] - blockIndices[i]);
do {
$(items.item(j)).css("width", width + "%");
} while (++j < blockIndices[i + 1]);
}
}
var unorderedLists = document.querySelectorAll(".unordered-list");
for (var i = 0; i < unorderedLists.length; ++i)
initializeUnorderedList(unorderedLists.item(i));
});
</script>
</head>
<body>
<ul class="unordered-list">
<li class="block">first row, first column</li>
<li class="block">second row, first column</li>
<li>second row, second column</li>
<li class="block">third row, first column</li>
<li>third row, second column</li>
<li>third row, third column</li>
<li>third row, fourth column</li>
<li>third row, fifth column</li>
<li>third row, sixth column</li>
<li>third row, seventh column</li>
</ul>
</body>
</html>
文本的<li>
元件内部应居中(垂直和水平)。
编辑: 固定不良标记
应该有一个'ul'或'ol'内比'li'以外的元素。包装列表的'div'元素使这个无效的HTML标记。 –
@DavidThomas - +1谢谢 - 修正了糟糕的标记。 – 0xbadf00d