& lt; a>标签在包含文本时定位不同

我有一个奇怪的问题，我不能弄清楚。我有一个包含锚标记的div，锚标记的定位不同，取决于它们是否有文本。

我想做的是有一个简单的条形图，在条形图中显示数字，数字在底部对齐。在下面的示例中，顶部图形的条形条与底部正确对齐，但在底部图形中，只要我添加数字，它就会翻转到顶部。任何想法是怎么回事，我怎么能解决(或更好的方式做到这一点)?

http://jsfiddle.net/dKM3T/2/

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css">
            .graph {
                width: 650px;
            }
            .graph .bar {
                width: 20px;
                margin: 1px;
                display: inline-block;
                background: #666;
                color: #fff;
                font-size: 10px;
                text-align: center;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="graph">
            <a href="#" class="bar" style="height:40px" data-index="1"></a>
            <a href="#" class="bar" style="height:20px" data-index="2"></a>
            <a href="#" class="bar" style="height:30px" data-index="3"></a>
            <a href="#" class="bar" style="height:20px" data-index="4"></a>
            <a href="#" class="bar" style="height:12px" data-index="5"></a>
            <a href="#" class="bar" style="height:32px" data-index="6"></a>
            <a href="#" class="bar" style="height:34px" data-index="7"></a>
            <a href="#" class="bar" style="height:12px" data-index="8"></a>
            <a href="#" class="bar" style="height:40px" data-index="9"></a>
            <a href="#" class="bar" style="height:20px" data-index="10"></a>
        </div>
        <div class="graph">
            <a href="#" class="bar" style="height:40px" data-index="1">40</a>
            <a href="#" class="bar" style="height:20px" data-index="2">20</a>
            <a href="#" class="bar" style="height:30px" data-index="3">30</a>
            <a href="#" class="bar" style="height:20px" data-index="4">20</a>
            <a href="#" class="bar" style="height:12px" data-index="5">12</a>
            <a href="#" class="bar" style="height:32px" data-index="6">32</a>
            <a href="#" class="bar" style="height:34px" data-index="7">34</a>
            <a href="#" class="bar" style="height:12px" data-index="8">12</a>
            <a href="#" class="bar" style="height:40px" data-index="9">40</a>
            <a href="#" class="bar" style="height:20px" data-index="10">20</a>
        </div>
    </body>
</html>

试试这个:

<style type="text/css">
        .graph {
            width: 650px;
        }
        .graph .bar {
            vertical-align: bottom;
            width: 20px;
            margin: 1px;
            display: inline-block;
            background: #666;
            color: #fff;
            font-size: 10px;
            text-align: center;
            text-decoration: none;
        }
    </style>

数字仍然显示在图的顶部，但图不再翻转。如果您希望数字显示在底部，您可能需要采用与这里不同的方法。

相关内容

最新更新

热门标签：