reancool 2015-09-18 14:26 采纳率: 100%
浏览 6792
已采纳

css 字体无法居中 我设置的 感觉text-align: center;无用

我设置的 感觉text-align: center;这个属性都没有什么作用,只好另外加left: -20px;
但是还是有很多,问题。因为那样只会让个别的居中。还有我的opacity:0.5; 这种设置兼容性很差。有些浏览器是完全不透明的。我很无解。。代码明显不是居中明显不是居中只有一个居中

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>京东商城</title>
<style type="text/css">
body,ul,li,h1,h2,h3,img,p,div{
 margin: 0; margin: o;}
.add{width: 990px; height: 70px; margin: 10px auto;}
.nav{width: 990px; height: 40px; margin: 10px auto; 
    background-color:#E63D40;}
.nav ul{ list-style: none;  
        }
.nav ul li{ float:left;width: 85px; height: 40px;
            font-family: 微软雅黑; color: white;  
            font-weight: bolder;
            line-height: 40px;
            position: relative;
            }       
.nav ul li a{
            width: 85px; height: 40px; position: absolute;
            text-align: center; margin: 0 auto;
             top: 0; left: -20px; bottom: 0; right: 0px;
            }
.nav ul li a:hover{ opacity:0.5; 
background-color: rgb(164,0,0);position: absolute;
            }
#li1{ width: 210px; height: 40px; }
</style>
</head>
<body>
    <div class="add">
        <img alt="广告" src="add.gif">
    </div>
    <div class="nav">
        <ul>
            <li id="li1">全部商品分类</li>
            <li><a href="javascript:;"></a>首页</li>
            <li><a href="javascript:;"></a>服装城</li>
            <li><a href="javascript:;"></a>京东超市</li>
            <li><a href="javascript:;"></a>团购</li>
            <li><a href="javascript:;"></a>夺宝岛</li>
            <li><a href="javascript:;"></a>闪购</li>
        </ul>
        <img alt="支付有礼" src="zfyl.jpg" align="right">
    </div>
</body>
</html>
  • 写回答

4条回答

  • Evankaka 博客专家认证 2015-09-19 04:30
    关注

    图片说明
    首页设置一个div,同时将li的left:-20px去掉
    代码如下:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>京东商城</title>
    <style type="text/css">
    body,ul,li,h1,h2,h3,img,p,div{
     margin: 0; margin: o;}
    .add{width: 990px; height: 70px; margin: 10px auto;}
    .nav{width: 990px; height: 40px; margin: 10px auto; 
        background-color:#E63D40;}
    .nav ul{ list-style: none;  
            }
    .nav ul li{ float:left;width: 85px; height: 40px;
                font-family: 微软雅黑; color: white;  
                font-weight: bolder;
                line-height: 40px;
                position: relative;
                }       
    .nav ul li a{
                width: 85px; height: 40px; position: absolute;
                text-align: center; margin: 0 auto;
                 top: 0;  bottom: 0; right: 0px;
                }
    .nav ul li a:hover{ opacity:0.5; 
    background-color: rgb(164,0,0);position: absolute;
                }
    #li1{ width: 210px; height: 40px; }
    </style>
    </head>
    <body>
        <div class="add">
            <img alt="广告" src="add.gif">
        </div>
        <div class="nav">
            <ul>
                <li id="li1">全部商品分类</li>
                <li><a href="javascript:;"></a><div align="center">首页</div></li>
                <li><a href="javascript:;"></a><div align="center">服装城</div></li>
                <li><a href="javascript:;"></a><div align="center">京东超市</div></li>
                <li><a href="javascript:;"></a><div align="center">团购</div></li>
                <li><a href="javascript:;"></a><div align="center">夺宝岛</div></li>
                <li><a href="javascript:;"></a><div align="center">闪购</div></li>
            </ul>
            <img alt="支付有礼" src="zfyl.jpg" align="right">
        </div>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?