将表单格式化为水平布局

Question

I have a Fitproconnect form which I would like to change from a vertical format to a horizontal format without breaking the form.

Here is the code for the vertical setup: https://jsfiddle.net/d5f808p0/

<form class="fitpro-listbuilder" method="POST" action="https://fitproconnect.com/Api/PublicContact/Subscribe/">
<div data-style-group="Main" style="padding: 20px; max-width: 280px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; margin: 0px auto; background: rgb(255, 255, 255); box-sizing: border-box; font-weight: normal; font-style: normal; position: relative;" data-sortable-column="" data-main-column="" data-default-input-style="1" data-default-button-style="2">
    <input type="hidden" name="ListBuilderID" value="fcc4e75c-230f-4b4b-8841-5ed1e4b2049e">



    <div data-replace-content-item="" data-item-name="First Name Input" data-item-type="input" data-can-edit="true" data-can-remove="false" data-can-move="true" data-disable-drag="true"><div><input type="text" value="" placeholder="First Name" name="SubscriberFirstName" onblur="fitProListBuilder.blur(this)" onfocus="fitProListBuilder.focus(this)" required="" data-required-name="First Name" style="box-shadow: none; width: 100%; margin-bottom: 10px; box-sizing: border-box; font-size: 15px; border: 1px solid rgb(153, 153, 153); color: rgb(0, 0, 0); padding: 10px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;"></div></div><div data-replace-content-item="" data-item-name="Email Input" data-item-type="input" data-can-edit="true" data-can-remove="false" data-can-move="true">
        <input type="email" value="" placeholder="Email Address" name="SubscriberEmail" onblur="fitProListBuilder.blur(this)" onfocus="fitProListBuilder.focus(this)" required="" data-required-type="email" data-required-name="Email Address" style="box-shadow:none; font-size:15px; border:1px solid #999; color:#000; padding:10px; width:100%; margin-bottom:10px; box-sizing:border-box">
    </div>

    <div data-replace-content-item="" data-item-name="Submit Button" data-item-type="submit" data-can-edit="true" data-can-remove="false" data-can-move="true">
        <input type="submit" value="SUBSCRIBE" style="border:none; font-size:15px; outline:none; background:#ffba00; font-weight:bold; padding:15px; width:100%; text-align:center; box-sizing:border-box; cursor:pointer;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" data-default-label="SUBSCRIBE">
    </div>

</div>

Desired horizontal setup

Thanks :)

Answer 1

Here's the basic gist of what you would need:

.container-element-of-inputs {
  display: inline-block;
  width: 33%;
  padding: 0 10px;
  box-sizing: border-box;
}

.main-container {
  max-width: none;
}

I do want to mention that there is probably an interface for styling the "Fitproconnect" form in a better manner, nonetheless I have updated your JSFiddle to reflect the aforementioned rules. I strongly recommend you to clean up that HTML code, if possible.