[技术交流] 为啥div中的a链接无法居中呢？ [复制链接]
查看:1617 | 回复:8

你等等 · 发表于 2015-7-12 20:51:50

真是怪事，DEDE里面的分页代码，我去掉了ul和li，只保留了a链接，如下代码所示，为啥a链接无法横向居中呢？

<div class="pages"><a href='#'>首页</a><a href='list_2.html'>下一页</a><a href='list_5.html'>末页</a></div>

复制代码

我只是想实现在列表页，能让分页代码横向居中，不知道哪里产生冲突了？

__________________________________首页下一页末页__________________________________

如果是文字代码，这样可以横向居中：

<div class="pages">首页下一页末页</div>

复制代码

硬没搞懂，我就不明白了，问题在哪里？

CSS代码如下：
.pages{width:90%;overflow:hidden;text-align:center;background:#333;margin:0 auto;padding:0 10px;}
.pages a{float:left;width:40px;height:30px;line-height:30px;overflow:hidden;text-align:center;white-space:nowrap;margin-right:6px;background:#f2f2f2;border:1px solid #3a7;color:#666;display:block }

小闲云野鹤 · 发表于 2015-7-12 21:32:51

.pages a{width:40px;height:30px;line-height:30px;overflow:hidden;text-align:center;white-space:nowrap;margin-right:6px;background:#f2f2f2;border:1px solid #3a7;color:#666;}

复制代码

因为你把A变成了块级元素使其拥有块级元素的属性。如果去掉这些属性就会失效，比如宽，高

笔墨文学 · 发表于 2015-7-12 20:59:16

你等等

iceteaa · 发表于 2015-7-12 21:14:23

跟其他地方的a冲突了

你等等 · 发表于 2015-7-12 21:22:08

iceteaa 发表于 2015-7-12 21:14
跟其他地方的a冲突了

应该不是冲突原因导致，我用最简单的一个页面代码，依然是a无法居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>标题</title>
<style>
.pages{width:90%;overflow:hidden;text-align:center;background:#333;margin:0 auto;padding:0 10px;}
.pages a{float:left;width:40px;height:30px;line-height:30px;overflow:hidden;text-align:center;white-space:nowrap;margin-right:6px;background:#f2f2f2;border:1px solid #3a7;color:#666;display:block}
</style>
</head>
<body>
<center><div class="pages"><a href='#'>首页</a><a href='list_2.html'>下一页</a><a href='list_5.html'>末页</a></div></center>
<div class="pages">首页下一页末页</div>
</body>
</html>

你等等 · 发表于 2015-7-12 21:38:02

小闲云野鹤发表于 2015-7-12 21:32
因为你把A变成了块级元素使其拥有块级元素的属性。如果去掉这些属性就会失效，比如宽，高

果....果....果然如此，是我忽略了这个元素，非常感谢！
真要点个赞！

guduluoren · 发表于 2015-7-13 11:05:01

pages a{float:left
能居中才怪了

dr21c · 发表于 2015-7-13 11:54:41

float:left 被float之后，无法居中，

你等等 · 发表于 2015-7-13 12:42:34

楼上两位说得对，我也是反复排查后才发现是float:left导致无法居中的，本意是一个a紧跟另一个a左对齐然后在div中居中，但没想到冲突了

百独托管7500 紫田网络	超高转化播放器收cps[推荐]	速盾CDN 免实名免备防屏蔽	阿里云爆款特卖9.9元封顶	提升alexa、IP流量7Q5团队
【腾讯云】中小企福利专场	【腾讯云】多款产品1折起	高防随时退换好耶数据	小飞国外网赚带你月入万元	炎黄网络4H4G10M 99每月
香港带宽CN2/美国站群优惠	中客数据中心服务器租用	联盟系统移动广告平台中易	企业专场腾讯云服务器2.5折	九九数据工信部正规资质
腾讯云新用户大礼包代金券	高价收cpa注册量高价展示	【腾讯云】2核2G/9.93起	租服务器找45互联随时退换	阿里云短信服务验证秒达

[技术交流] 为啥div中的a链接无法居中呢？ [复制链接]
查看:1617 | 回复:8

评分

评分

落伍手机绑定

QQ绑定

落伍微信绑定

落伍者

[技术交流] 为啥div中的a链接无法居中呢？ [复制链接] 查看:1617 | 回复:8

评分

评分

落伍手机绑定

QQ绑定

落伍微信绑定

落伍者

[技术交流] 为啥div中的a链接无法居中呢？ [复制链接]
查看:1617 | 回复:8