需要有关调整大小问题的提示和指南

Question

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

jsfiddle.net/aX86d/

如果有人可以为我提供一个关于新手友好指南的教程，以维护整个网络的外观，我将不胜感激发生。

Answer 1

如果您的问题是屏幕宽度增加时高度增加，这是因为您的块（块 A 和块 B）和 #user 元素具有百分比宽度。所以，当宽度增加时，由于屏幕宽度的增加，元素的高度也会增加，导致这个问题。一个好的解决方案是在 CSS 中指定一个最大高度，例如：

max-height: 30px;

将30px 更改为您希望元素获得的最大值，然后尝试一下。元素的大小不会超过最大高度。

查看这个更新的小提琴：http://jsfiddle.net/aX86d/3/

编辑：

由于您的问题是水平间距，我建议使用绝对定位。每当您将元素定位为绝对时，它的父级必须相对定位。然后我将 top 和 bottom 设置为 0，margin 设置为 auto 8px，auto top-bottom 和 8ps left-right。这使元素垂直居中。看到这个fiddle。

我应该提一下，CSS calc() 函数在一些旧版浏览器中不起作用，但在所有当前流行的浏览器中都可以使用。

关于绝对定位的信息：

请参阅this page，了解相对定位中的绝对定位。

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