Отредактируйте расстояние между двумя встроенными элементами

Question

В настоящее время у меня есть 2 столбца содержимого, отображающих строку в одной строке.

Следующая задача, которую я пытаюсь преодолеть, заключается в том, чтобы эти два элемента были ближе друг к другу на той же линии.

Думаю, что я нашел ответ здесь, но не совсем уверен, что это значит. Если это правильный способ достижения указанного результата, объяснение содержания было бы очень полезно: Two column width 50% css

Кроме того, у меня есть текущий CSS настроить на моей таблице стилей:

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

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

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

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

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

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

 
#NewsletterOptions { 
 
\t width: 45%; 
 
\t 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>

Только для контекста это 1 половина формы контакта.

Любая обратная связь или информация, которую вы можете предоставить по этому вопросу, будут высоко оценены.

Кроме того, если вы простудились, предложите мне выстроить текст Отказ от ответственности внизу с другими элементами в этом первом «.div». Я был бы очень благодарен.

С наилучшими пожеланиями,

Dan

Answer 1

Вы можете поместить обертку вокруг двух див и использовать Flexbox, который даст вам распределение столбцов, как из двух див рядом друг с другом:

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

В нижеприведенном фрагменте я удалил лишние вещи - не уверен, что вы хотите сохранить, а что нет.

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

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

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

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

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

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

 
#NewsletterOptions { 
 
\t width: 45%; 
 
\t 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>