我正在做一个元素，我有一个包含 3 个按钮的页面。 第一个按钮是按钮标签，另外两个是 div 标签。 我对这两个 div 使用了一个类，使它们看起来像我的按钮标签。 问题是我为按钮标签和带有类的 div 编写了相同的 CSS 规则，但正如您从下面的照片中看到的那样，它们并不相同。
这是我的代码: 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;
}
请帮帮我!!!
最佳答案
您必须应用背景色来覆盖浏览器默认值:
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;
}
我已确保字体系列相同，并且它们显示为内联元素。
关于html - CSS 类将应用于不同的 div 元素和不同的按钮元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26061401/