我正在嘗試使用 html 和 css 在 wordpress 中構(gòu)建一個內(nèi)聯(lián)論壇。我有一個問題，因為表單不是以內(nèi)聯(lián)方式出現(xiàn)，而是以正常方式出現(xiàn)，在這里您可以找到代碼： <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>newsletter</title></head><body> <div class="newsletter-subscribe"> <div class="container"> <div class="intro"> <h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2> <p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p> </div> <form class="form-inline" method="post" action="the link"> <div id="mc_embed_signup_scroll"> <div class="form-inline"><input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required=""><input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required=""></div> <div class="form-inline"><button class="btn btn-primary" type="submit">Subscribe </button></div> </form> </div> </div></body></html>我有這個CSS，我沒有將它包含在HTML中，因為我在wordpress中h2{font-size:24px;font-weight:700;margin-bottom:25px;line-height:1.5;padding-top:0;margin-top:0;color:inherit}.form-inline { display: flex; flex-flow: row wrap; align-items: center; } .form-inline { flex-direction: column; }.newsletter-subscribe.intro{font-size:16px;max-width:500px;margin:0 auto 25px}.newsletter-subscribe.intro p{margin-bottom:35px}.newsletter-subscribe.newsletter-subscribeform .form-control{background:#eff1f4;border:none;border-radius:3px;box-shadow:none;outline:0;color:inherit;text-indent:9px;height:45px;margin-right:10px;min-width:250px}.newsletter-subscribe這就是我所看到的
1 回答
qq_遁去的一_1
TA貢獻1725條經(jīng)驗 獲得超8個贊
因此，我們要實現(xiàn)這一目標，您必須從樣式中刪除這段代碼：
.form-inline {
flex-direction: column;
}
為什么呢？
因為flex-direction: column;會讓你的每一個 div 子元素作為一個獨立的行，并且將它們?nèi)孔鳛橐涣小＞拖衲阒叭〉玫某删鸵粯印?/p>
然后，實現(xiàn)內(nèi)聯(lián)表單輸入和按鈕的下一步是將button標簽從具有相同類的獨立分區(qū)中移出，并將它們?nèi)堪b到單個 div 中，如下所示：
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
最終剪輯
最后，您的所有代碼將類似于以下代碼片段：
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
更新
因此，為了在這些輸入之間留出空間，您應(yīng)該margin為每個 div 子項添加屬性，如下所示：
.form-inline input, .form-inline button {
margin: 0 5px;
}
那么最終的輸出將是這樣的：
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.form-inline input, .form-inline button {
margin: 0 5px;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
注意：該屬性margin是簡寫的，margin: /*margin-top margin-right margin-bottom margin-left*/因此如果您像這樣使用它：margin: 0 5px頂部和底部邊距將為 0，左右邊距將為 5px。
- 1 回答
- 0 關(guān)注
- 119 瀏覽
添加回答
舉報
0/150
提交
取消