Question

http://www.wecare.bz 在你输入你的邮政编码的地方，文本框和按钮是对齐的，但是文本框比提交按钮更细，而css并没有把我的身高超过愚蠢的大小＆＃34;

我的HTML

<form class="pcm" action="/index.php/bridge" method="POST">
<div><input class="pcmtext" name="postcode" type="text" placeholder="Enter Your Postcode..." /> <input class="pcmbutton" type="submit" value="Get Started today!" />

我的CSS

.pcmtext {
  width:25%;
  height:500px;
  vertical-align: top;
}
.pcmbutton {
  width:40%;
  height:500px;
  vertical-align: top
}

Answer 1

发现它有点棘手，但joomla.css中的input[type="text"]选择器更具体针对您的.pcmtext，因此它会赢得并设置height:46px;。

您需要做的就是让您的选择器更具体，可能input.pcmtext最有意义。然后你的覆盖将开始：

.pcmtext {
  width:25%;
  height:500px;
  vertical-align: top;
}

Answer 2

CSS中的

规则具有权重，您可以在MDN中阅读更多相关内容。

现在，在您的情况下，目标.imageBg #gkHeaderMod input[type="submit"]的特异性高于.pcmbutton，因此在覆盖时您应该使用更具体的目标，例如：.imageBg #gkHeaderMod .pcmbutton或.imageBg #gkHeaderMod input[type="submit"].pcmbutton

我试图让我的文本框与提交按钮的高度相同，但网站忽略了CSS

2 个答案: