Moving Submit Button Inline

  • Resolved CaliforniaSea

    (@californiasea)


    11 years, 3 months ago

    I created a form with one “text” input field and would like to move the submit button adjacent and inline with the field. Any hints on this?

    Here is the form code I am using:

    [text* your-name placeholder "You Name"]

[submit  class:button_submit "Submit"]

    I tried the following CSS but to no avail:

    .wpcf7 {
float:center; /*Center form on page*/
text-align:center;
display:inline;
}

    https://ww.wp.xz.cn/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)
  • p.castaldi

    (@pcastaldi)

    11 years, 3 months ago

    do like this:

    <ul class="floatLi selfClearCont">
<li><fieldset>[text* your-name placeholder "You Name"]<fieldset></li>
<li>[submit  class:button_submit "Submit"]</li>
</ul>

    and 

    ul.floatLi li {float: left; margin-right: 10px;}
  ul.floatLi li:last-of-type {margin-right: 0px; clear: right;}

  ul.selfClearCont {
    padding: 0 !important;
    margin: 0 !important;
  }

  ul.selfClearCont li {
    list-style-type: none;
    padding: 0 0 10px 0 !important;
  }
  .selfClearCont:before,
  .selfClearCont:after {
    content:"";
    display:table;
  }

  .selfClearCont:after {
    clear:both;
  }

  .selfClearCont {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
  }

    This should help

    Thread Starter CaliforniaSea

    (@californiasea)

    11 years, 3 months ago

    That does indeed put them inline, but unfortunately it floats the object to the left.

    If float:left; is replaced with float:center; it makes them out of line again.

    p.castaldi

    (@pcastaldi)

    11 years, 3 months ago

    Sorry, I did not understand you wanted centered items. You can’t use float: center (it doesn’t exist). You have to do:

    ul.floatLi li {display: inline-block; margin-right: 10px;}
  ul.floatLi li:last-of-type {margin-right: 0px; clear: right;}

  ul.selfClearCont {
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  ul.selfClearCont li {
    list-style-type: none;
    padding: 0 0 10px 0 !important;
  }
  .selfClearCont:before,
  .selfClearCont:after {
    content:"";
    display:table;
  }

  .selfClearCont:after {
    clear:both;
  }

  .selfClearCont {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
  }

    I did not test it out, but this should work.

    Thread Starter CaliforniaSea

    (@californiasea)

    11 years, 3 months ago

    Awesome, yep that worked! And thank you for the info on float:center. I’ve got a lot more to learn.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Moving Submit Button Inline’ is closed to new replies.