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>

Desired horizontal setup

谢谢：）

Answer 1

以下是您需要的基本要点：

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

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

我想提一下，可能有一个界面可以更好地为“Fitproconnect”表单设置样式，但I have updated your JSFiddle反映了上述规则。如果可能，我强烈建议您清理该HTML代码。

格式表格到水平布局

1 个答案: