CSS样式不适用于按钮？

-1

/* 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他在头文件中的按钮样式在第一页上被搞乱了。

他们都使用相同的类，唯一的区别是第一页使用按钮，而第二页使用链接。但是，我不明白为什么这个样式应该重要。

是否有按钮的样式不相同的原因？

来源

2016-08-22 Pickle

的造型是不相同的，因为你不清理出的输入 – APAD1

如何的默认样式我要这样做吗？我认为CSS会覆盖默认的样式。 – Pickle

它的确如此，但您并未取消CSS中输入的所有默认样式。看看[表单CSS重置]（https://gist.github.com/anthonyshort/552543） – APAD1

您正在使用相同的类，但在不同的元素上。您有input[type=submit]，input[type=button]和div s与a标签。

这些元素中的每个人都有不同的默认样式，所以你需要调整你的CSS重置/覆盖这些默认值

来源

2016-08-22 16:47:42 Guy

我该怎么做？我认为CSS层叠，以便最底层的风格是应用的风格。我不知道我必须清除元素的默认样式。 – Pickle

CSS样式不适用于按钮？

回答

相关问题