无法构建html / css内联表单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无法构建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，因为我在wordpress中，所以我没有将它包含在HTML中
h2font-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
.introfont-size:16px;max-width:500px;margin:0 auto 25px.newsletter-subscribe
.intro pmargin-bottom:35px
.newsletter-subscribe
.newsletter-subscribe
form .form-controlbackground:#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
答案
因此我们要实现这一点，您必须从样式中删除这段代码：
.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>以上是关于无法构建html / css内联表单的主要内容，如果未能解决你的问题，请参考以下文章
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：内联表单