<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>内联块状元素</title><style type="text/css">a{ display:inline-block; width:20px;/*在默认情况下宽度不起作用*/ height:20px;/*在默认情况下高度不起作用*/ background:pink;/*设置背景颜色为粉色*/ text-align:center; /*设置文本居中显示*/}</style></head><body><a>1</a><a>2</a><a>3</a><a>4</a></body></html>
2 回答
马西拉拢
TA贡献6条经验 获得超8个赞
您对<a>设置了display:inline-block，只是对<a>标签所包裹的内容设置了水平居中，所以能够看到每个<a>标签的数字，是水平居中的；
如果需要让这4个<a>块都放在同一行且居中，就要为每一个<a>都添加一个<div>包裹，如：
<div class="box"><a>1</a></div>
在原有代码基础上，增加以下css设置
body{
text-align:center;
}
.box{
display:inline;
}
这样就可以啦！
如果想4个<a>块不需要放在同一行，而是各占一行，那么上述代码中可以不用设置.box{display：inline}了~
不知道有没有帮到您？
- 2 回答
- 0 关注
- 1383 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消