我想制作一个类似于 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>
最佳答案
老实说，我同意表格数据最好放在表格中的评论。
但是如果你想在列表元素中使用 div，那么对 div 使用 display:inline-block 和 overflow:none 应该使它们垂直对齐并固定宽度。
显示:内联 block 是 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>
...应该给你一个开始。
关于html - 将表格变成具有特定宽度的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7670920/