css 来自https://prosulum.zendesk.com/entries/59409583-How-to-Create-Horizo​​ntal-Opt-In-Form-in-Header

Posted 2021-05-13

 You should have already added the action box to your header. If not, please see this forum thread https://prosulum.zendesk.com/entries/21306111-Can-you-use-Magic-Act...

The following custom css code should create a horizontal opt in form with text to the left and the form fields in line to the right.. You'll need to know the ID of your action box. To find the ID, go to Magic Action Box -> Action Boxes page. The ID should show up on the 2nd column right after the Title of the action box (on the first column).

Then, edit the action box that you'd like to display as horizontal opt in form and go down to the end of the edit screen. Enter the following css code into the Custom CSS field:

.mab-id-XXXX.magic-action-box .mab-content{ text-align: center; }
.mab-id-XXXX.magic-action-box .mab-wrap .mab-heading{ display: inline-block; margin-right: 0 !important; vertical-align: middle; width: 450px !important; }

.mab-id-XXXX.magic-action-box .mab-wrap .mab-main-content{ display: inline-block; margin-right: 0 !important; vertical-align: middle; width: 450px !important; }

.mab-id-XXXX.magic-action-box .mab-main-action-wrap{ display: inline-block; vertical-align: middle;}

.mab-id-XXXX.magic-action-box .mab-main-action-wrap .mab-field{ margin-bottom: 0; }
.mab-id-XXXX.magic-action-box .mab-main-action-wrap .mab-field label{ display: inline !important; }

.mab-id-XXXX.magic-action-box .mab-main-action-wrap form{ margin: 0 !important; }
.mab-id-XXXX.magic-action-box .mab-main-action-wrap form input[type="submit"]{ margin: 0 !important; }

 

Replace XXXX with the actual ID number of your action box.