line 3 divs on one line

我試圖讓mailchimp註冊表單在同一行而不是默認的3行。line 3 divs on one line

我試圖添加顯示：inline-block;這沒有什麼區別，我也嘗試在容器周圍放置一個容器，但這沒有什麼區別。

我沒有太多的CSS經驗，但我理解它。我想知道是否有更多經驗的人可以提供幫助。

<!-- Begin MailChimp Signup Form --> 
<div id="mc_embed_signup"> 
<form action="//digital-realms.us12.list-manage.com/subscribe/post?u=b3dcff09f16684d5f73852c78&amp;id=af1750ad39" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 

<div>Sign up to free e-Mail alerts for the latest news, offers & more: </div> 
<div class="mc-field-group"> 
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
</div> 
    <div id="mce-responses" class="clear"> 
     <div class="response" id="mce-error-response" style="display:none"></div> 
     <div class="response" id="mce-success-response" style="display:none"></div> 
    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_b3dcff09f16684d5f73852c78_af1750ad39" tabindex="-1" value=""></div> 
    <div class="clear opt-in" "><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
    </div> 
</form> 
</div> 

<!--End mc_embed_signup-->

謝謝。

ps：代碼來自MailChimp，他們設置類，所以我沒有任何我自己的CSS來包括。

來源

2015-11-05 sherman tracey

在使用'inline-block'時，您是否嘗試更改div的寬度？ –

@傑維爾，那出色的工作。 30％的人沒有工作，但是通過放置價值而不是百分比來實現夢想。 –

我還必須使用[at]媒體，以便在移動設備上使用網站時，但這沒什麼（我認爲我們都期望移動網站與桌面網站看起來不同）。 @ Heru-Luin，當我使用線路塊時，我認爲我的寬度在他們的div中設置爲％，但我更喜歡Jewel給出的答案，因爲我更容易理解它（如果這是有道理的話）。謝謝你們。 –

使用以下HTML

.parent { 
 
    width: 100%; 
 
} 
 
.block1 { 
 
    width: 30%; 
 
    float: left; 
 
    padding-right: 10px; 
 
} 
 

 
.block2 { 
 
    width: 30%; 
 
    float: left; 
 
    padding-right: 10px; 
 
} 
 
.block3 { 
 
    width: 30%; 
 
    float: left; 
 
}

<div class="parent"> 
 
    <div class="block1">Content 1</div> 
 
    <div class="block2">Content 2</div> 
 
    <div class="block3">Content 3</div> 
 
</div>

您可以更改寬度。並插入您的HTML到內容1，內容2，內容3

來源

2015-11-05 12:33:01 Jewel

line 3 divs on one line

回答

相關問題