我希望有人能帮助我。我正在努力做到这一点:
这是我目前所拥有的:
下面是我当前的 html。如何仅在 div 的内部显示边框(如第一个屏幕截图所示)?另外,如何使每个 div 的高度和宽度成为正方形(而不是矩形)?使用 html 表更好还是使用 div 可能更好? html 代码是动态生成的,所以我不能只在各个 div 上添加右/左边框。
<div style="width: 100%; text-align: center;">
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">M</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">T</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">W</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">R</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">F</span>
<br/>
7-5
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
最佳答案
<style type="text/css">
.wrapper {
width: 400px;
text-align: center;
}
span {
display:block;
}
.box {
float: left;
height:40px;
width: 40px;
background-color: #CCCCCC;
border-left: 1px solid black;
}
.box.act {
background-color:white;
}
.box:first-child {
border:none;
}
.box > span:first-child {
font-weight:bold;
}
</style>
<div class="wrapper">
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
<div class="box">
<span>M</span>
<span>5-7</span>
</div>
<div class="box">
<span>T</span>
<span>5-7</span>
</div>
<div class="box">
<span>W</span>
<span>5-7</span>
</div>
<div class="box">
<span>R</span>
<span>5-7</span>
</div>
<div class="box act">
<span>F</span>
<span>7-5</span>
</div>
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
关于仅 css div 内部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14984214/