链接和按钮定位答案

【问题标题】：Link and button positioning链接和按钮定位
【发布时间】：2019-11-07 03:28:32
【问题描述】：

我需要使特定类的按钮和链接看起来和定位相同。我试过这个（简化）：

<html>
    <head>
        <title>My site</title>
        <style>
            .my-class {
                display: inline-block;
                background-color: #cccccc;
                width: 18px;
                height: 18px;
                cursor:pointer;
                box-sizing: border-box;
                border: 1px solid #888888;
            }
        </style>
    </head>
    <body>

        <a href="#" class="my-class" title="My link"></a>

        <button class="my-class" type="submit" title="My button"></button>

    </body>
</html>

但是链接的位置比按钮高一点：

是否有跨浏览器的纯 css 解决方案（无 javascript）允许将它们定位在同一级别上？

【问题讨论】：

你加了float:left;
谢谢迪佩什。是的，它解决了问题。
看看有时我们只需要 cmets 来解决问题

标签： html css button cross-browser positioning

【解决方案1】：

将此添加到您的 CSS：

vertical-align: middle;

你可以在这里看到：http://codepen.io/anon/pen/akzgy

或者您可以将显示设置为阻塞和向左浮动：

display: block;
float: left;

【讨论】：

【解决方案2】：

试试这个Fiddle

这应该很适合您的情况。它主要包括 css 的 float 属性

【讨论】：

【解决方案3】：

<body>
   <div style="height:50px;line-height:50px">
    <a href="#" class="my-class" title="My link"></a>

    <button class="my-class" type="submit" title="My button"></button>
    </div>


</body>

css:

 .my-class {
            display: inline-block;
            background-color: #cccccc;
            width: 18px;
            height: 18px;
            cursor:pointer;
            box-sizing: border-box;
            border: 1px solid #888888;
            height:50px;
vertical-align:top;
        }

【讨论】：