Question

当我的表单处于小尺寸屏幕尺寸时，它显示正确，但是当我增加宽度时，它看起来不正确。有任何想法吗？这是正常还是有办法让它很好地定位？这是我的小提琴：

jsfiddle.net/aX86d /

我很感激，如果有人可以为我提供一本关于整个网络外观的无教学指南的教程，可以使用小/宽浏览器，因为我正在为应用目的创建，因此不同的屏幕分辨率使用肯定会发生。

Answer 1

如果您的问题是当屏幕宽度增加时高度增加，这是因为，您的块（blockA和blockB）和#user元素具有百分比宽度。因此，当宽度增加时，由于屏幕的宽度增加，如果元素也增加高度，则会导致此问题。一个很好的解决方案是在CSS中指定max-height，例如：

max-height: 30px;

将30px更改为您希望元素获取的最大值，然后尝试使用。该元素不会调整大小超过最大高度。

请参阅此更新的小提琴：http://jsfiddle.net/aX86d/3/

编辑：

由于您的问题是水平间距，我建议使用绝对定位。无论何时将元素定位为绝对元素，它的父元素都必须相对定位。然后我将top和bottom设置为0，将margin设置为auto 8px，自动上下，8ps左右。这使元素垂直居中。请参阅此fiddle。

我应该提到CSS calc()函数在某些旧版浏览器中不起作用，但它适用于所有当前流行的浏览器。

关于绝对定位的信息：

请参阅this page关于相对定位内的绝对定位。

基本上，此页面表示如果绝对位置元素位于相对位置元素内，则它的顶部，底部，左侧和右侧样式将相对于父级。否则，它将相对于body，而不是它的父亲。看看上面提到的页面上的图片，它们可能会帮助您更好地理解。