Правая кнопка выравнивания с текстовым полем

Question

Любые советы о том, как просто выровнять кнопку справа от текстового поля в этом примере, будут оценены (это может быть несколько пикселей слева по какой-то причине - может быть, только я?) :

<input type="text" class="input"/> 
<input type="button" value="alignment ok" class="left"/> 
<input type="button" value="alignment bad" class="right"/> 

CSS

.input { 
    width: 100% 
} 
.right { 
    float: right; 
} 

codepen here

Answer 1

проблема заключается в том, что ширина: 100% будет растягиваться первый вход 100% экрана, но поле ввода выравнивается по RIGH t будет выровнена тегом body. Это будет делать трюк:

body,input { 
margin:0; 
} 

Answer 2

использование сброса CSS для вашего стиля.

body{ 
    padding:0px; 
margin: 0px auto;  
} 

sample

Answer 3

использование

DEMO

.input { 
    width: 100% 
} 
.right { 
    float: right; 
    position:relative; 
} 
body{ 
    padding:0px; 
margin: 0px auto;  
} 

Answer 4

Если установить свойство box-sizing ваши кнопки выровнены

.input { 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Пример на codepen: http://codepen.io/anon/pen/hGcme

---

Скриншот

Answer 5

.input { 
    width: 100% 
} 
.right { 
    float: right; 
    margin:0px; 
    padding:0px; 
} 

Fiddle

Выход:

Result