<div>宽度明明设置了100%,为啥两头还是有空白
时间: 2024-03-21 16:38:36 浏览: 9
可能是因为元素的父级元素设置了padding或者border的原因导致的。你可以尝试给父级元素设置padding和border为0,或者使用CSS的Box-sizing属性来解决这个问题。Box-sizing属性有两个可选值,分别是content-box和border-box。设置为border-box时,元素的宽度会包括border和padding的值。例如:
```
box-sizing: border-box;
```
这样设置后,即使给元素添加了padding和border,也不会影响元素的宽度,从而避免了两头留白的问题。
相关问题
将下列代码所展示表格改的更加精致美观: <div class="nick3"> <table border="1"> <tr>TOP5: <th>ID</th> <th>score</th> </tr> {% for players in top %} <tr> {% for r in players%} <td>{{r}}</td> {% endfor %} </tr> {% endfor %} </table> </div>
<div class="nick3">
<table style="border-collapse: collapse; width: 100%;" cellpadding="5">
<tr style="background-color: #4CAF50; color: white;">
<th style="border: 1px solid #ddd; padding: 12px;">ID</th>
<th style="border: 1px solid #ddd; padding: 12px;">Score</th>
</tr>
{% for players in top %}
<tr style="background-color: #f2f2f2;">
{% for r in players%}
<td style="border: 1px solid #ddd; padding: 8px;">{{r}}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
我为您增加了以下改进:
1. 设置了表格的样式为 border-collapse: collapse,使边框线更加清晰。
2. 增加了表头的背景色和文字颜色,使其更加突出。
3. 增加了交替行的背景色,使表格更加易读。
4. 调整了单元格的 padding 和边框宽度,使表格更加美观。
<div class="about skills"> <h2 class="title2">专业技能</h2> <div class="box"> <h4>HTML</h4> <div class="percent"> <div style="width: 50%;"></div> </div> </div> <div class="box"> <h4>CSS</h4> <div class="percent"> <div style="width: 52%;"></div> </div> </div> <div class="box"> <h4>JavaScript</h4> <div class="percent"> <div style="width: 20%;"></div> </div> </div> <div class="box"> <h4>java</h4> <div class="percent"> <div style="width: 45%;"></div> </div> </div> <div class="box"> <h4>javaweb</h4> <div class="percent"> <div style="width: 32%;"></div> </div> </div> <div class="box"> <h4>Sql</h4> <div class="percent"><div style="width: 45%;"></div></div> </div> </div>加入js鼠标事件
好的,您可以在每个技能的div标签内添加onmouseover和onmouseout属性,来实现鼠标移入移出时的效果。例如:
```
<div class="box" onmouseover="this.style.background='grey'" onmouseout="this.style.background='white'">
<h4>HTML</h4>
<div class="percent">
<div style="width: 50%;"></div>
</div>
</div>
```
在这个例子中,当鼠标移入box的div时,会将背景色改为灰色,当鼠标移出时,又将背景色改回白色。您可以根据自己的需求来修改鼠标事件的效果。