Question

我正在使用以下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>

它在第二页上工作正常，但是标题中按钮的样式在第一页上搞砸了。

他们都使用相同的类，唯一的区别是第一页使用按钮而第二页使用链接。但是，我不明白为什么这对这种造型很重要。

按钮的样式是否相同？

Answer 1

您使用的是同一个类，但是使用的是不同的元素。您拥有input[type=submit]，input[type=button]和div个a标记。

这些元素中的每一个都有不同的默认样式，因此您需要调整css以重置/覆盖这些默认值

CSS样式不适用于按钮？

1 个答案: