右对齐按钮与文本框

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％，但右边对齐的输入框将通过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