Databases
StackOverflow2013
Postsdbo
POAligning inputboxes to the right using foundation top-menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAligning inputboxes to the right using foundation top-menu
    text
    copied!<p>I'm building a responsive website using ZURB's foundation 4.</p> <p>I'm trying to align the log-in form to the right, without the padding next to the login button.</p> <p>When following the documentation, with only one input box (originally a search form), there is no padding to the right side of the button </p> <p>This code achieves this, can be reproduced and is provided by the foundation <a href="http://foundation.zurb.com/docs/components/top-bar.html#" rel="nofollow">docs</a>:</p> <pre><code> &lt;form&gt; &lt;div class="row collapse"&gt; &lt;div class="small-8 columns"&gt; &lt;input type="text"&gt; &lt;/div&gt; &lt;div class="small-4 columns"&gt; &lt;a href="#" class="alert button"&gt;Login&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>When I modify this code to have two inputboxes, the padding appears. I have tried everything I can think of to remove the padding. This is the code</p> <pre><code> &lt;form&gt; &lt;div class="row collapse"&gt; &lt;div class="small-4 columns"&gt; &lt;input type="text"&gt; &lt;/div&gt; &lt;div class="small-4 columns"&gt; &lt;input type="password"&gt; &lt;/div&gt; &lt;div class="small-4 columns"&gt; &lt;a href="#" class="alert button"&gt;Login&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>The problem can be viewed <a href="http://vps528.greenhost.nl/problem1/" rel="nofollow">here</a></p> <p>I could also set the login-button to expanded, but this obviously makes the button a lot bigger, than it actually should be.</p> <p>Any help is appreciated</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload