Question

我正在尝试对齐3个元素，1来自div，另外2来自另一个div。它们都需要内联，问题是使用float left和inline-block只有2个内联。我无法对HTML端进行任何修改

FiDDLE - ＆gt; https://jsfiddle.net/75gg6cwp/2/

现场：http://newskillsacademy.co.uk/

预期输出：https://form.jotform.com/62644280988973

HTML

<div id="ssp-1786600221-487496969" class="simplesignuppro ssp_embed" style="width: 100%; position: static; opacity: 1; margin: 0px auto; transition: all 0s ease-in 0s; animation-duration: 0s; animation-timing-function: linear; animation-delay: 0s;">
  <div class="mc_embed_signup">
    <div class="mc_embed_signup_inner" style="box-shadow: none; background: rgb(244, 247, 249); border-radius: 4px;">
      <form onsubmit="return false;" method="post" class="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">
        <div class="inside-form">
          <h2 class="-default3" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: normal; font-family: Roboto, serif;"></h2>
          <div class="mc-field-group">
            <div class="signup">
              <div class="-default2">
                <input type="text" value="" name="firstnamesub" class="firstnamesub customfields" placeholder="First Name" style="margin-bottom: 0px; border-radius: 3px; font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; font-family: Roboto, serif;">
              </div>
              <div class="ssp-email-row -default4">
                <input type="email" value="" name="ssp_email" class="ssp_email mce-EMAIL" placeholder="Your Email" style="font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-family: Roboto, serif;">
                <input type="submit" value="Submit" name="subscribe" class="subscribe button" style="margin-top: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: rgb(199, 18, 47); color: rgb(255, 255, 255); font-family: Roboto, serif;">
              </div>
            </div>
            <div class="ssp_social_login -default4"></div>
          </div>
          <div class="clear mce-responses">
            <div class="response mce-error-response" style="display:none"></div>
            <div class="response mce-success-response" style="display:none"></div>
          </div>
          <div style="position: absolute; left: -5000px;">
            <input type="text" name="b_59e5bbfbcc749fdb8fe68637a_b9c0fde42d" value="" style="font-family: Roboto, serif;"><img width="1" height="1" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAATSURBVHjaYvj//z8DAAAA//8DAAj8Av7TpXVhAAAAAElFTkSuQmCC"></div>
        </div>
      </form>
    </div>
  </div>
</div>

CSS

.ssp-email-row.-default1 {
  width: 28% !important;
}
.-default1 {
  width: 28%
}

.signup > div {
    float: left;
    width: 28.5% !important;
}

Answer 1

要解决此问题，您需要：

将第二个div（2个输入的容器）设置为宽度为X2（57％而不是28.5％）
将div内的输入设置为左浮动，宽度设置为49％（而不是100％）（为填充/边框等保留一些空间）。

这是代码：

.signup > div:nth-child(2) {
    width: 57% !important;
}
.signup > div:nth-child(2) input {
    width: 49% !important;
    float: left;
    clear: none;
}

这是一个例子：
https://jsfiddle.net/jw2qnuyd/

显示内联块和浮动左侧问题

1 个答案: