Question

我正在开发一个项目，我有一个带有3个按钮的页面。第一个按钮是按钮标签，另外两个是div标签。我已经使用了这两个div的类来使它们看起来像我的按钮标签。问题是我为按钮标签和div写了相同的CSS规则，但从下面的照片可以看出它们不一样。

Problem with div and button class

这是我的代码： HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Δομημένος προγραμματισμός</title>
    <meta charset="utf-8"/>
</head>
<body>
<button onclick="exercise()">Click me</button>
<div class="button" onclick="klimakoti()">Klimakoti xreosi</div>
<div class="button" onclick="hw()">Height and weight</div>
</body>
</html>

CSS：

button{
    border: 0px;
        padding: 15px;
        font-size: 18px;
        color: green;
        font-style: italic;
        border-radius: 6px;
        border-left:4px dashed #f22aa9;
 }
     .button{
        border: 0px;
        padding: 15px;
        font-size: 18px;
        color: green;
        font-style: italic;
        border-radius: 6px;
        border-left:4px dashed #f22aa9;
    }

请帮帮我!!!

Answer 1

您必须应用背景颜色才能覆盖浏览器默认值：

button, .button {
    border: 0px;
    padding: 15px;
    font-size: 18px;
    color: green;
    font-style: italic;
    border-radius: 6px;
    border-left:4px dashed #f22aa9;
    background-color: transparent;

 }

编辑 - 如果您希望<div>元素看起来像按钮，而不是相反，您还需要做其他一些事情：

button, .button {
    border: 0px;
    padding: 15px;
    font-size: 18px;
    color: green;
    font-style: italic;
    font-family: sans-serif;
    border-radius: 6px;
    border-left:4px dashed #f22aa9;
    background-color: #ddd;
    margin: 0;
    display: inline-block;
 }

我确保字体系列相同，并且它们显示为内联元素。

Answer 2

您必须添加背景颜色并将显示类型设置为内联块（我认为是默认按钮显示）。

button, .button {
    border: 0px;
    padding: 15px;
    font-size: 18px;
    font-family:arial;
    color: green;
    font-style: italic;
    border-radius: 6px;
    border-left:4px dashed #f22aa9;
    background-color: grey;
    display:inline-block;

}

以下是最终结果：http://jsfiddle.net/h25h5oz5/

Answer 3

您必须确保添加了背景颜色并添加了显示：inline-bl

CSS类将应用于div元素，不同于button元素

3 个答案: