Question

我需要制作特定类的按钮和链接，以同样的方式定位和定位。我试过这个（简化）：

<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>

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

buttons

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

Answer 1

试试这个Fiddle

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

Answer 2

将此添加到您的css：

vertical-align: middle;

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

或者您可以将显示设置为阻止并浮动到左侧：

display: block;
float: left;

Answer 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;
        }

链接和按钮定位

3 个答案: