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

[前端][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; /*加上这个*/
            }
    

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

    评论
    解决 1 无用
    打赏 举报

相关推荐 更多相似问题