1

リンクのリストをhtmlで作成しようとしています。デフォルトでは、リンクはすべてコンテナの左側に配置されます通常の配置 が、フォントが変更されると(つまり、font-size:1.5em;)、線はピラミッドパターンを形成し、最後の数字は含まれません。ピラミッドパターンのリンク

この問題は、FirefoxとChromeの両方で発生します。

これがhtmlです

    <div id="container">
        <div id="content">
            <div class="links">
                <span class="rank" style="width:2.20ex;" >1</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >2</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >3</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >4</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >5</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >6</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >7</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >8</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >9</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
            <div class="links">
                <span class="rank" style="width:2.20ex;" >10</span>
                <a href="http://www.youtube.com/">this is a test</a>
            </div>
        </div>
    </div>

これがcssです

#container {
    margin: 0 auto;
    width: 1024px;
}

#content {
    background-color: green;
}

.rank {
    color: #c63131;
    float: left;
    font-family; arial;
    font-size: 1.5em;
    margin-right: 0.2em;
    text-align: right;
}

.links {
    margin-left: 3px;
}

.links a {
    text-decoration: none;
}
4

2 に答える 2

1
.links {
    overflow:hidden;
}

またClear:both;

于 2013-03-02T21:43:17.183 に答える
1

ランククラスからフロートを削除するだけです

.rank 
{
/*float:left*/
}
于 2013-03-02T21:46:33.173 に答える