显示内嵌块和浮动左边的问题

我想对齐3个元素，1从一个div和另一个div从另一个2。他们都需要内联，问题在于使用float left和inline-block，其中只有2个内联。我不能做任何修改HTML侧显示内嵌块和浮动左边的问题

活动网站：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; 
}

来源

2016-09-22 user3467855

没有CSS动态对准不共享共同的父元素。 –

@Paulie_D For Real，Not event让他们看起来像？ – user3467855

在你真的可以告诉基本没有可能之前，你需要做很多简化的演示（特别是JSfiddle中的所有内联风格）。你可以玩边际等，但如果你改变了一些东西，你必须重新开始。 –

为了解决这个问题，你需要：

要设置第二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/

来源

2016-09-22 14:44:00 Dekel

显示内嵌块和浮动左边的问题

回答

相关问题