將表單格式化為水平布局

Question

我有一個Fitproconnect表格，我希望在不破壞表格的情況下將其從垂直格式更改為水平格式。

這是垂直設置的代碼： 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>

所需的水平設置

謝謝 ：）

Answer 1

這是您需要的基本要點：

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

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

我確實要提及的是，可能存在一個用於更好地設置“ Fitproconnect”表單樣式的界面，盡管如此， 我已經更新了您的JSFiddle以反映上述規則。 如果可能，我強烈建議您清理該HTML代碼。