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

Question

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

我要克服的下一个挑战是让这两个元素在同一条线上更紧密地结合在一起。

我想我可能在这里找到了答案，但不太确定它意味着什么。如果这是实现上述结果的正确方法，那么对内容的解释将非常有帮助：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;
}

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

​

.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>

​