Совместите кнопку в нижнем правом углу входа

Question

Это то, что я хочу:

Я попытался this approach без везения (получил от here). Это нежелательный результат:

Я предполагаю, что это не работает, потому что я использую Twitter Bootstrap и продолжительность:

<div id=containerOfButtonAndInput class="container span12"> 

Но как я мог бы сделать это тогда?

Answer 1

Почему бы вам не использовать CSS? Используйте что-то вроде этого:

<div id="outer-container"> 
    <div id="container"> 
    <div id="label">Your Label<input id="input" /></div> 
    <div style="height:10px">&nbsp;</div> 
    <div id="button">Your Button</div> 
    </div> 
</div> 

CSS:

#outer-container{ 
    padding: 20px 20px 20px 20px; 
    width:500px; 
    height:200px; 
    background-color:#eee; 
} 
#container{ 
    width:300px; 
    height:100px; 
    margin: 0 auto; 
    background-color:#ccc; 
} 
#label{ 
    float:right; 
} 
#button{ 
    float:right; 
} 

Нет волшебной здесь. Просто регулярное форматирование. Только не бойтесь div-тегов. Возможно, вам нужно больше контейнеров вокруг вашей маски.

Просмотреть скрипку: http://jsfiddle.net/Ahg5c/1/.