我有一个HTML页面，嵌入了CSS样式。 它有一个表单，里面有一个输入按钮，上面写着 "提交付款"，使用的是#fjButton，高度为54，这个按钮被服从了。我还有一个id为#fjButton2，高度为14......都设置为！重要。 #fjButton2没有得到服从。 我相信这是一些愚蠢的事情，但我就是想不通......无论我做什么，它都保持在32px。 看它在。https:/codepen.iojohnstonffullYzwGqNO。
<!DOCTYPE html>
<html>
<head>
<title>Test-Store</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Inter&display=swap" rel="stylesheet">
<!-- Landing page styling -->
<style type="text/css">
body{
background-color: #f2f4f9;
}
h3, h5{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
}
h3{
font-size: 36px;
}
h5{
font-size: 24px;
}
p, label{
font-family: 'Inter', sans-serif;
}
hr{
color:#fff;
background-color: #fff;
border-top:1px solid #fff;
margin-top:10px;
margin-bottom: 10px;
}
#container{
width:1200px;
margin:0 auto;
padding-top: 3%;
}
.column-6{
text-align: center;
width: 50%;
float:left;
}
#left-wrapper{
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#right-wrapper{
padding-top: 13px;
margin-top: 13px;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#profile-pic{
width:200px;
display:block;
margin: 0 auto;
border-radius: 50%;
float:left;
}
#left-wrapper-header{
min-width:50%;
float:left;
padding-left:20px;
}
#left-wrapper-header h3{
color:#fff;
}
#right-wrapper h3{
color: #10a195;
}
.Z9999{
margin-left: 1px;
width: 99%;
}
/* ------------------------ FORM FIELDS ------------------------ */
.form-field-12{
width: 100%;
margin-bottom: 6px;
padding-top: 3px;
}
.form-field-6{
width: 50%;
float:left;
margin-bottom: 1px;
}
select{
width: 100%;
height: 25px!important;
box-shadow: 0 1px 3px 0 #dce0e6;
padding: 1px 2px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
font-size: 20px;
color: #44464a;
}
input{
box-shadow: 0 1px 3px 0 #dce0e6;
height:40px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
width: 95%;
padding: 5px;
font-size: 16px;
}
input::placeholder {
color: #9fa1a6;
}
/* ------------------------ BUTTON STYLING ------------------------ */
#fjButton {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 54px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
.myButton:hover {
opacity: .6;
}
@media screen and (max-width:1200px){
#container{
width:80%;
}
.column-6{
width: 100%;
}
}
@media screen and (max-width:800px){
#container{
width:100%;
}
.Z9999{
margin-left: 20px;
width: 100px;
}
}
</style>
<!-- Success page styling -->
<style type="text/css">
h4{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
font-size: 24px;
}
#box{
max-width: 500px;
margin:0 auto;
margin-top: 100px;
padding:30px;
background-color: #fff;
text-align: center;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 4px;
border: 1px solid transparent;
}
.myButton {
background-color:#72cca7;
background-color:#26367e;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:17px;
padding:10px;
width:30%;
border-radius: 0;
text-decoration:none;
text-align: center;
transition: .3s;
}
.myButton:hover {
opacity: .6;
}
#succes-icon{
width: 100px;
}
</style>
</head>
<body>
<style type="text/css">
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
<script src="https://js.stripe.com/v3/"></script>
<div id="container">
<div class="column-6">
<div id="left-wrapper">
<img id="profile-pic" src="{% static 'images/logo-20may29.png' %}">
<div id="left-wrapper-header">
<h3>Item Purchase</h3>
</div>
<div style="clear:left"></div>
<hr>
<!-- Add form here -->
<form action="{% url 'charge' %}" method="post" id="payment-form">
<div class="form-field-12">
<label for="amount"><b>Pick a product from this dropdown:</b></label>
<select required name="amount" id="amount">
<option selected value="1">$1 CAD ------> TEST</option>
<option value="1">$1 CAD -----> 1 item</option>
<option value="2">$2 CAD -----> 2 items</option>
<option value="3">$3 CAD ----> 3 items</option>
<option value="4">$4 CAD ----> 4 items</option>
<option value="5">$5 CAD ---> 5 items</option>
</select>
</div>
<div class="form-field-6">
<label for="email"><strong>* Enter your email address:</strong></label>
<input required type="email" name="email" placeholder="* email...">
</div>
<div class="form-field-6">
<label for="username"><strong>* Desired username / login name:</strong></label>
<input required type="text" name="username" placeholder="* username...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Dogs name:</strong></label>
<input type="text" name="dog" placeholder="Dogs name...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Favorite beer:</strong></label>
<input type="text" name="beer" placeholder="Favorite beer...">
</div>
<div class="form-field-6">
<label for="country"><strong>* Enter your Country:</strong></label>
<input required type="text" name="country" placeholder="* Country...">
</div>
<div class="form-field-6">
<label for="phone"><strong>* Enter your phone number:</strong></label>
<input type="tel" id="phone" name="phone" placeholder="* Phone..."
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
</div>
<div class="form-row">
<label for="card-element">
<strong>Credit or debit card</strong>
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert">
</div>
</div>
<div style="clear:left">
</div>
<hr>
<input id="fjButton" style="background-color:#10a195;height:12px" type="submit" value="Submit Payment" name="">
<hr>
<a href="https://opp.ca" target="_blank" id="fjButton2" style="background-color:#10a195; height:77px" >OPP Homepage</a>
<br><br><br><br>
</form>
</div>
</div>
<div class="column-6">
<div id="right-wrapper">
<img class="form-field-12" src="{% static 'images/Z9999.png' %}">
<h3> We appreciate you!</h3>
<hr>
</div>
</div>
</div>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_live_blahblah');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
</body>
</html>
高度不会对这个有任何影响 <a> 标签，因为它有一个 display 的 inline所以你只需要把它的显示方式改为类似于 inline-block 使其服从设定的高度，如
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
display:inline-block;
}
希望能帮到你
我终于找到了这个... CSS - 为什么我不能设置<a href> 元素的高度和宽度？ 正如它所说... "正如其他人所说，默认情况下是一个内联元素，内联元素不能指定宽度和高度。你可以把它改成像这样的块元素"。
a {
display: block;
}
尽管它将作为一个区块显示（毫不奇怪），独立于周围的文本流之外。一个更好的解决方案是使用display: inline-block，这可能是一个两全其美的解决方案，取决于你的情况。
a {
display: inline-block;
}