Question

我想为排名看起来像这个ESPN大学橄榄球排名。如何将此代码转换为具有特定宽度的div和lis？我确实查看了源代码，这段代码使用了一个包含偶数行和奇数行的类的表。我是

我正在考虑这方面的内容，但我不知道如何为不同的组件设置特定的宽度（等级得分等）

            <div id="topRanked">
            <span id="title">Top Ranking</span>
            <div id="headers">

            </div>
            <ul id="topTen">
                <li class="odd"></li>
                <li class="even"></li>

            </ul>
        </div>

Answer 1

老实说，我同意表格中表格数据更好的评论。

但是如果你想在列表元素中使用div，那么对div使用display：inline-block和overflow：none应该保持它们垂直对齐并固定宽度。

显示：内联块是well supported

标记和样式如：

<html></html>
<head>
<style type="text/css">
body { font-size: 1em;}
li {list-style:none;}
li.odd {background: #eef; width: 265px; height:20px; overflow:none;}
li.even {background: #fff; width: 265px; height:20px; overflow:none;}
div.rank, div.team, div.record, div.pts, div.rankHead, div.recordHead, div.teamHead, div.ptsHead {display:inline-block; overflow:none; margin-right:1px; padding-top:2px; padding-left: 5px;}
div.rank, div.rankHead {width:25px;}
div.team, div.teamHead {width:100px;}
div.record, div.recordHead {width:75px;}
div.pts, div.ptsHead {width:40px;}
div.rankHead, div.teamHead, div.recordHead, div.ptsHead {background: gray;}
</style>

</head>
<body>
    <div id="topRanked">
        <span id="title">Top Ranking</span>
        <div id="headers">

        </div>
        <ul id="topTen">
            <li class="head"><div class="rankHead">RK</div><div class="teamHead">TEAM</div><div class="recordHead">RECORD</div><div class="ptsHead">PTS</div></li>
            <li class="odd"><div class="rank">1.</div><div class="team">LSU</div><div class="record">5-0</div><div class="pts">1473</div></li>
            <li class="even"><div class="rank">2.</div><div class="team">Alabama</div><div class="record">5-0</div><div class="pts">1435</div></li>
            <li class="odd"><div class="rank">3.</div><div class="team">Oklahoma</div><div class="record">4-0</div><div class="pts">1397</div></li>
            <li class="even"><div class="rank">4.</div><div class="team">Wisconsin</div><div class="record">5-0</div><div class="pts">1266</div></li>
            <li class="odd"><div class="rank">5.</div><div class="team">Boise State</div><div class="record">4-0</div><div class="pts">1248</div></li>
            <li class="even"><div class="rank">6.</div><div class="team">Oklahoma State</div><div class="record">4-0</div><div class="pts">1191</div></li>
            <li class="odd"><div class="rank">7.</div><div class="team">Stanford</div><div class="record">4-0</div><div class="pts">1185</div></li>
            <li class="even"><div class="rank">8.</div><div class="team">Clemson</div><div class="record">4-0</div><div class="pts">1093</div></li>

        </ul>
    </div>
</body>
</html>

......应该给你一个开始。

enter image description here

将表格转换为具有特定宽度的div

1 个答案: