qq_43412960
qq_43412960
采纳率79.1%
2019-07-05 10:05 阅读 348

这是一个关于HTML的神奇问题

5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
        margin:0px;
        }
        #kaitou {height:100px;
                 box-shadow:0 10px 1px gray;
        }
  </style>
</head>
<body>
   <div id="kaitou"></div>

    <span style="left:20%;top:50%"  >欢迎</span>
    <span style="left:20%;top:20%">欢迎</span>


</body>

</html>

我设置的top属性都已经百分之50了,但是欢迎这两个字还是在阴影横线上,咋整,大佬们

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • caozhy 从今以后生命中的每一秒都属于我爱的人 2019-07-05 10:10
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style>
            * {
            margin:0px;
            }
            #kaitou {height:100px;
                     box-shadow:0 10px 1px gray;
            }
      </style>
    </head>
    <body>
       <div id="kaitou">
    
        <span style="left:20%;top:50%;vertical-align: top;">欢迎</span>
        <span style="left:20%;top:20%;vertical-align: top;">欢迎</span>
    
    </div>
    </body>
    
    </html>
    
    
    点赞 评论 复制链接分享
  • wutiantesi 悟天特斯 2019-07-05 10:29

    大佬,你想要怎样的展示呢?
    不要搞事情,那俩span都是行元素,一个top50,一个top20没意义吖!

    点赞 评论 复制链接分享
  • qq_41456029 qq_41456029 2019-07-05 10:58

    位置调整太多了 简单的定位就可以的

    点赞 评论 复制链接分享
  • MoYuan91 『墨渊』 2019-07-05 11:42
    <span style="position:absolute;left:20%;top:50%;vertical-align: top;">欢迎</span>
        <span style="position:absolute;left:20%;top:20%;vertical-align: top;">欢迎</span>
    

    图片说明

    点赞 评论 复制链接分享
  • enteracity json_wuwu 2019-07-05 17:11

    可以使用displa改变为块元素就有用了,行内元素不生效的

    点赞 评论 复制链接分享
  • Michaelia_hu 冥灵树 2019-07-05 22:38

    猜测你是想让欢迎两个字在顶端距阴影的中间,既然你已经设了kaitou的高是100px,那么就可以设置span距顶的margin为50px:

       <div id="kaitou">
        <span style="position:absolute;left:20%;margin-top:50px;">欢迎</span>
        </div>
    
    效果图:
    ![图片说明](https://img-ask.csdn.net/upload/201907/05/1562337669_732505.jpg)
    
    点赞 评论 复制链接分享

相关推荐