Ouch! 2021-11-26 19:14 采纳率: 100%
浏览 31
已结题

[前端][HTML+CSS]button标签文本位置问题

问题遇到的现象和发生背景

自己尝试写轮播,遇到的button标签问题,如图,加入文本1、2后对应的按钮“飞”了。

img

问题相关代码,请勿粘贴截图

-----所用样式
/* 按钮所在的DIV 类 */

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            border-color: #43edff;
            border-width: 1px;
            border-style: solid;
            border-radius: 10px;
            width: 500px;
            height: 312px;
            position: relative;
            background-color: #00FFFF;
            margin-left: 500px;
            margin-top: 100px;
            overflow-x: hidden;
        }
        #carousel{
            /* background-color: #9bafbc; */
            width: 3000px;
            height: 312px;
            font-size: 0px;
            position: absolute;
            left: 0px;
        }
        #carousel > img{
            border-radius: 10px;
        }
        /* 按钮所在的DIV 类 */
        .button{
            position: absolute;
            right: 10px;
            bottom: 5px;
            width: 100px;
            height: 20px;
            background-color: rgba(255,255,255,1);
            z-index: 10;            
        }
        /* 按钮所用 类 */
        .icon{
            border-radius: 50%;
            height: 20px;
            width: 20px;
            border-color: #1B6D85;
            border-style: solid;
            border-width: 1px;
            font-size: 1px;
            
            line-height: inherit;
        }
    </style>

--对应的页面代码

<div class="show">
        <div id="carousel">
            <img src="./img/redtravel/广安市邓小平故里.jpg" alt="" id="img1">
            <img src="./img/redtravel/延安革命纪念馆.jpg" alt="" id="img2">
            <img src="./img/redtravel/歌乐山烈士陵园.jpg" alt="" id="img3">
            <img src="./img/redtravel/瑞景共和国摇篮景区.jpg" alt="" id="img4">
            <img src="./img/redtravel/西柏坡.jpg" alt="" id="img5">
            <img src="./img/redtravel/遵义会议会址.jpg" alt="" id="img6">
        </div>
        <div class="button">
            <button type="button"  class="icon">1</button><button type="button"  class="icon">2</button><button type="button"  class="icon"></button><button type="button"  class="icon"></button><button type="button"  class="icon"></button>
        </div>
    </div>    

运行结果及报错内容

无报错,如图一。
希望有人能解答,感谢不尽。

  • 写回答

1条回答 默认 最新

  • 关注

    你题目的解答代码如下:

            /* 按钮所用 类 */
            .icon{
                border-radius: 50%;
                height: 20px;
                width: 20px;
                border-color: #1B6D85;
                border-style: solid;
                border-width: 1px;
                font-size: 1px;
                line-height: inherit;
                vertical-align: top; /*加上这个*/
            }
    

    如有帮助,望采纳!谢谢!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月4日
  • 已采纳回答 11月26日
  • 创建了问题 11月26日

悬赏问题

  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?