爲什麼文本在列表項中不對齊？

給定以下簡單的頁面，其示出了一個無序列表：爲什麼文本在列表項中不對齊？

<!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>元件內部應居中（垂直和水平）。

編輯： 固定不良標記

來源

2011-12-12 0xbadf00d

應該有一個'ul'或'ol'內比'li'以外的元素。包裝列表的'div'元素使這個無效的HTML標記。 –

@DavidThomas - +1謝謝 - 修正了糟糕的標記。 – 0xbadf00d

似乎集中在下面的例子：

Working Example

雖然它可能不工作取決於您的瀏覽器，你的商標的有效性通常，HTML不喜歡<ul>內的<div>元素。

建議的解決方案：

使用與哪一行，你想指定的指標，如「1」，「2」和‘3’，讓使用Javascript/jQuery的處理您的寬度的情況。

HTML：

<ul class="unordered-list"> 
      <li class='1'>first row, first column</li> 
      <li class='2'>second row, first column</li> 
      <li class='2'>second row, second column</li> 
      <li class='3'>third row, first column</li> 
      <li class='3'>third row, second column</li> 
      <li class='3'>third row, third column</li> 
      <li class='3'>third row, fourth column</li> 
      <li class='3'>third row, fifth column</li> 
      <li class='3'>third row, sixth column</li> 
      <li class='3'>third row, seventh column</li> 
</ul>

的jQuery：

//This will group each of your classes and apply the %-based width. 
$('.1,.2,.3').each(function(){ 
    var width = Math.floor(100/($('.' + $(this).attr('class')).length)); 
    $(this).css('width',width + '%'); 
});

Prosposed Solution Example

的jQuery（企圖垂直定心）：

$('.1,.2,.3').each(function(){ 
    var width = Math.floor(100/($('.' + $(this).attr('class')).length)); 
    var height = $(this).height()/2; 
    $(this).css('width',width + '%') 
    .css('margin-top',height + 'px') 
    .css('height',($(this).height() - height) + 'px'); 
});

Try out the Vertical-Centered Example

來源

2011-12-12 16:01:24

有效的標記會更有幫助 –

@ScottSimpson - 更新了有效的建議和有效的標記。 –

+1 |有效的建議，但實際的問題是文本不是垂直居中。 – 0xbadf00d

爲什麼文本在列表項中不對齊？

回答

相關問題