编辑两个内联元素之间的距离

Question

目前我有 2 列内容在同一行内联显示。

我要克服的下一个挑战是让这两个元素在同一条线上更接近。

我想我可能在这里找到了答案，但不确定它的含义。如果这是实现上述结果的正确方法，对内容的解释将非常有帮助：Two column width 50% css

或者，我在样式表上设置了当前的 CSS：

.fields-1 {
	float: left;
	width: 46%;
	text-align: center;
	margin: auto auto auto 0;
}

.fields-2 {
	float: right;
	text-align: center;
	display: inline;
	width: 46%;
	padding-top: 5px;
	padding-left: -15px;
	margin: auto 0 auto auto;
}

.fields-2 p {
	font-size: 25px;
	font-weight: 500px;
}

#disclaimer {
	font-size: 16px;
	line-height: 17px;
	font-family: calibri;
	font-style: strong;
	padding-bottom: 15px;
	width: 45%;
}

#your-name {
	width: 45%;
	margin-right: 2px;
}

#your-email {
	width: 45%;
	margin-right: 2px;
}

#NewsletterOptions {
	width: 45%;
	height: 45px;
}

<div class="fields-1">
<p style="text-align: center">[text* your-name id:your-name placeholder: "Team Name/Filmmaker"] <b>(required)</b></p>

<p style="text-align: center">[email* your-email id:your-email placeholder: "Email Address"] <b>(required)</b></p>
<p id="disclaimer">*Your e-mail helps us discuss your contribution with you; this email will not be used for any third party or internal promotions without consent.</p>
</div>
<div class="fields-2">
<p>Would you like 3 new short films to watch each month? </p> <br>
[select* NewsletterOptions id:NewsletterOptions "Yes sure, sounds good!" "Not at the moment, thank you." "Already signed up."]

</div>

就上下文而言，它是联系表格的一半。

您可以就此事提供任何反馈或信息，我们将不胜感激。

另外，如果您建议我将底部的免责声明文本与第一个“.div”中的其他元素对齐，我将不胜感激。

亲切的问候，

丹

Answer 1

您可以在两个 div 周围放置一个包装器并使用 flexbox，这将为您提供两个相邻的 div 的列状分布：

.wrapper {
      display: flex; 
      justify content: space-around;
}

在下面的 sn-p 中，我删除了一些多余的东西 - 不知道你想保留什么，不知道什么。

.wrapper {
  display: flex; 
  justify content: center;
 }
.fields-1 {
	width: 46%;
	text-align: center;
}

.fields-2 {
	text-align: center;
	width: 46%;
	padding-top: 5px;
}

.fields-2 p {
	font-size: 25px;
	font-weight: 500px;
}

#disclaimer {
	font-size: 16px;
	line-height: 17px;
	font-family: calibri;
	font-style: strong;
	padding-bottom: 15px;
}

#your-name {
	margin-right: 2px;
}

#your-email {
	margin-right: 2px;
}

#NewsletterOptions {
	width: 45%;
	height: 45px;
}

<div class="wrapper">
<div class="fields-1">
<p style="text-align: center">[text* your-name id:your-name placeholder: "Team Name/Filmmaker"] <b>(required)</b></p>

<p style="text-align: center">[email* your-email id:your-email placeholder: "Email Address"] <b>(required)</b></p>
<p id="disclaimer">*Your e-mail helps us discuss your contribution with you; this email will not be used for any third party or internal promotions without consent.</p>
</div>
<div class="fields-2">
<p>Would you like 3 new short films to watch each month? </p> <br>
[select* NewsletterOptions id:NewsletterOptions "Yes sure, sounds good!" "Not at the moment, thank you." "Already signed up."]

</div>
  </div>