CSS样式不适用于按钮?
问题描述:
我使用下面的CSS:CSS样式不适用于按钮?
/* START HEADER SETTINGS */
.header {
top: 0;
right: 0;
left: 0;
bottom: 90%;
position: fixed;
padding: 20px;
background-color: #404040;
font-family: 'Lobster', cursive;
font-size: 30px;
}
#fundme {
padding-left: 2%;
font-size: 40px;
float: left;
color: white;
text-decoration: none;
}
.header_buttons {
color: #fff;
background: #00cc66;
border-radius: 8px;
text-align: center;
margin: 5px;
padding: 10px;
}
.hb-4,
.hb-5 {
background: #00cc66;
float: right;
}
.logout {
color: #fff;
text-decoration: none;
background: #00cc66;
padding: 6px 6px 6px 10px;
border-radius: 8px;
display: inline-block;
margin: 5px;
float: right;
font-size: 30px;
}
/* END HEADER SETTINGS */
与以下页面:
页1
<div class="header"><a id="fundme" href="https://fund.me">fund.me</a>
<form method="post" action="">
<input type="button" name="profile" class="hb-4 header_buttons" value="Profile" />
<input type="submit" name="logout" class="hb-5 header_buttons" value="Log Out" />
</form>
</div>
<div class="container">
the application will be shown here
<?php echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div>
</body>
页2
<div class="header"><a id="fundme" href="https://fund.me">fund.me</a>
<div class="hb-4 header_buttons"><a href="https://fund.me/signup.php">Sign Up</a></div>
<div class="hb-5 header_buttons"><a href="https://fund.me/login.php">Log In</a></div>
</div>
<div class="container">
<form method="post" action="">
<h1 class="credential_form">Sign Up</h1>
<input type="text" name="fullname" class="credential_form" id="fullname" placeholder="Full Name" /><br /><br />
<input type="text" name="email" class="credential_form" id="email" placeholder="Email" /><br /><br />
<input type="password" name="password" class="credential_form" id="password" placeholder="Password" /><br /><br />
<input type="submit" name="submit" class="credential_submit" value="Submit" /><br /><br />
</form>
<?php if(isset($response)) echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div>
</body>
它的工作原理罚款第二页,但t他在头文件中的按钮样式在第一页上被搞乱了。
他们都使用相同的类,唯一的区别是第一页使用按钮,而第二页使用链接。但是,我不明白为什么这个样式应该重要。
是否有按钮的样式不相同的原因?
答
您正在使用相同的类,但在不同的元素上。您有input[type=submit]
,input[type=button]
和div
s与a
标签。
这些元素中的每个人都有不同的默认样式,所以你需要调整你的CSS重置/覆盖这些默认值
+0
我该怎么做?我认为CSS层叠,以便最底层的风格是应用的风格。我不知道我必须清除元素的默认样式。 – Pickle
的造型是不相同的,因为你不清理出的输入 – APAD1
如何的默认样式我要这样做吗?我认为CSS会覆盖默认的样式。 – Pickle
它的确如此,但您并未取消CSS中输入的所有默认样式。看看[表单CSS重置](https://gist.github.com/anthonyshort/552543) – APAD1