无法构建 html/css 内联表单
我正在尝试使用 html 和 css 在 wordpress 中构建一个内联论坛。我有一个问题，因为表单不是以内联方式出现，而是以正常方式出现，在这里您可以找到代码：
<!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-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}.newsletter-subscribe
这就是我所看到的
繁星coding1回答
-
qq_遁去的一_1
因此，我们要实现这一目标，您必须从样式中删除这段代码：.form-inline { flex-direction: column;}为什么呢？因为flex-direction: column;会让你的每一个 div 子元素作为一个独立的行，并且将它们全部作为一列。就像你之前取得的成就一样。然后，实现内联表单输入和按钮的下一步是将button标签从具有相同类的独立分区中移出，并将它们全部包装到单个 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>更新因此，为了在这些输入之间留出空间，您应该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。
随时随地看视频慕课网APP
相关分类
Html5