html - 保持网站大小相同

Question

大家好，我在保持网站内容一致方面遇到了麻烦。以下是该网站的外观示例:

现在，这里是不对齐的地方。当我将窗口的大小调整得更小时，文本会像这样移动:

目前这些是应用于我的标签的 css 属性，它位于文本上。

#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}

#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}

使“标题”始终与最暗灰色框的 Angular 对齐的正确方法是什么？

谢谢。

Answer 1

因为您的标题容器内部有填充，文本“标题”与屏幕边缘保持至少 85 像素。因为它是左对齐的，这意味着它的左边缘总是在 85 像素处。

因此，当侧边栏小于 85px 时，文本无法与其对齐。

您可以通过固定侧边栏的大小来解决此问题，方法是消除 padding-left 指令并将其替换为与侧边栏大小相同的元素(或将其替换为与侧边栏宽度相同的数量!)，或者通过在侧边栏上设置最小宽度。