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

これを 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 に答える