为什么列表项中的文本不对齐？

发布于 2024-12-20 14:14:18 字数 2739 浏览 0 评论 0原文

给定以下简单页面，其中显示一个无序列表：

<!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>

元素内的文本应居中（垂直和水平）。

编辑： 修复了错误标记

原文

Given the following simple page, which shows an unordered list:

<!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>

Text inside the <li> elements should be centered (vertically and horizontally).

EDIT:
fixed bad markup

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼泪 2024-12-27 14:14:18

它在以下示例中居中显示：

工作示例

尽管它可能无法工作，具体取决于您的浏览器和标记的有效性，通常 HTML 不喜欢

元素。

建议的解决方案：

使用您想要指定的行的指示符，例如“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 + '%');
});

建议的解决方案示例

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');
});

尝试垂直居中示例

It appears centered in the following example:

Working Example

Although it may not working depending on your browser and the validity of your mark-up, typically HTML doesn't like <div> elements within a <ul>.

Proposed Solution:

Using an indicator with which row you wanted to specify, such as '1','2', and '3' and let Javascript / jQuery handle your width situation.

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 (with attempted vertical-centering) :

$('.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

回复收藏 0 原文

~没有更多了~