0

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

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

4

3 回答 3

0

试试这个小提琴

这应该适用于您的情况。它主要包括floatcss 的属性

于 2013-09-14T10:03:45.467 回答
0

将此添加到您的CSS：

vertical-align: middle;

就像你在这里看到的：http: //codepen.io/anon/pen/akzgy

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

display: block;
float: left;
于 2013-09-14T10:03:59.850 回答
0 
<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;
        }
于 2013-09-14T10:06:26.960 回答