牛大der 2021-12-07 10:09 采纳率: 50%
浏览 65
已结题

为什么li标签会掉下来,我把li中的数字12删掉就恢复正常了,



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li{
        list-style:none;
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 50%;
        display: inline-block;
        line-height: 40px;
        text-align: center;
    }
    ul{
        display: inline-block;
    }
</style>
<body>
<div>
    <ul>
        <li>12</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>


img

<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
</body>

img

  • 写回答

4条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-07 10:51
    关注

    li设置 vertical-align: top;
    vertical-align用来指定行内元素或表格元素的垂直对齐方式
    因为你里面有文字之后,文字的默认垂直对齐方式是baseline,也就是圆的底部,也就把圆拖了下来,如果你设置成顶部之后,他就会上去,又因为文字有line-height,虽然文字基线在圆顶部,但文字还是垂直居中效果。

    如有帮助,望采纳 ^.^ 谢谢啦

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 12月15日
  • 已采纳回答 12月7日
  • 修改了问题 12月7日
  • 创建了问题 12月7日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分