Question

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

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

我想我可能在这里找到了答案，但并不确定这意味着什么。如果这是实现上述结果的正确方法，那么对内容的解释将非常有用：Two column width 50% css

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

＆＃13;

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

＆＃13;

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

＆＃13;

仅针对上下文，它是联系表单的一半。

您可以提供有关此事的任何反馈或信息。

另外，如果你冷建议让我在底部排除免责声明文本与第一个＆＃39; .div＆＃39;中的其他元素。我将非常感激。

亲切的问候，

丹

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: