物质图标，为什么arrow_right占用比arrow_left更多的空间

发布于 2025-01-23 09:39:20 字数 1278 浏览 3 评论 0原文

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forwards</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

由于某种原因，fowards_arrow和back_arrow图标占用不同量的空间。这是监督吗？我该如何使它们对称？

编辑：添加了物质化样式表，以便其他人可以复制代码

原文

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forwards</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

As you can see, from the above code snippets. For some reason the fowards_arrow and back_arrow icons take up different amounts of space. Is this an oversight?
How can I make them symmetrical?

Edit: Added materialize stylesheet so others can replicate the code

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

已下线请稍等 2025-01-30 09:39:20

从arrow_forwards中删除s

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <div class="col s12">
       <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forward</i></a>
       <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
    </div>

Remove the s from arrow_forwards

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <div class="col s12">
       <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forward</i></a>
       <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
    </div>

回复收藏 0 原文

~没有更多了~