我正在尝试使用 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-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条经验 获得超7个赞
因此，我们要实现这一目标，您必须从样式中删除这段代码：
.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。
- 1 回答
- 0 关注
- 80 浏览
添加回答
举报
0/150
提交
取消