Question

在组装网站时，我发现将按钮与其他元素配合使用非常复杂，因此所有元素看起来都是一样的。
例如，在菜单中，一些按钮是真正的按钮，而其他按钮只是到其他页面的HTML链接。其他示例可以是表单，其中按钮预期与其他输入一样大请参阅my jsFiddle以了解我在说什么。 在示例中，我希望按钮看起来像其他元素！
自SO要求以来的一些代码：

HTML：

Both elements shole be of the same size
<div id="menulike">
    <button>DO SOMETHING</button>
    <a href="#something">GO TO SOMETHING</a>
</div>

CSS：

div#menulike button, div#menulike a {
    /*reset some default styles*/
    border-style: none;
    border-width: 0px;
    text-decoration: none;

    /*Inline or inline-block*/
    display: inline;
    display: inline-block;
    /*colors and stuff*/
    color: white;
    font-weight: bold;
    background: black;

    /*This is important - size is expected to be the same*/
    padding: 3px;
    margin: 1px;
    width: 220px;


    font-size: 12pt;
    text-align: center;
}

Answer 1

为什么会这样？

在应用相同样式时，元素看起来不一样的原因是由于在元素上应用了默认样式。这是因为元素不同。根据浏览器的不同，差异也可能不同。

你如何解决这个问题？

您只需覆盖元素之间不同的所有属性。浏览器之间的许多差异可以通过CSS重置来解决。

为什么我的示例不起作用？

关于您的特定问题，该按钮具有不同的宽度，因为您没有覆盖所有按钮的CSS属性。尝试将以下内容添加到文本输入中：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

这应该给他们所有相同的宽度。或者，您可以按下box-sizing: content-box按钮，这是大多数元素的默认按钮。

至于按钮和链接之间的区别，当我将鼠标悬停在它们上方时，我只能看到光标图标。可以使用cursor属性更改此内容：

cursor: default;

修改

我刚刚注意到第二个示例在Firefox中的按钮和链接有不同的高度（之前我使用的是Chrome，但没有显示它）。我相信这是height和box-sizing的组合。将两者设置为元素的相同值应该使它们具有相同的大小。

我只是猜测，但我认为在这种情况下需要height的原因是因为FF中的按钮和链接之间的字体区别对待。由于没有设置高度，因此字体在两个元素中占用了不同的空间，即使它是相同字体的相同字体。

Answer 2

我不确定，但是表单元素（按钮，选择，单选按钮）是由浏览器提供的。每个浏览器/操作系统都有一种显示方式。所以我认为你需要为它编写一个单独的css块。

如何使按钮看起来与其他元素相同，反之亦然

HTML：

CSS：

2 个答案: