Question

我有一个奇怪的问题，我无法弄清楚。我有一个包含锚标签的div，根据它们是否包含文本而定位不同。

我要做的是有一个简单的条形图，条形图显示在条形图中，数字在底部对齐。在下面的示例中，顶部图形的条形图正确对齐底部，但在底部图形中，只要我添加数字，它就会翻转到顶部。任何想法是什么，我如何解决（或更好的方法）？

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

Answer 1

试试这个：

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

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

<a> tags positioned differently when containing text</a>

1 个答案: