【问题标题】:How can I keep elements aligned despite screen size?尽管屏幕大小,如何保持元素对齐?
【发布时间】:2015-06-26 08:41:32
【问题描述】:

我对编程还很陌生,只是想知道无论用户的屏幕大小如何,我都可以将元素保持在原位。更具体地说,当用户更改屏幕宽度时,我如何保持列表在顶部对齐,以免推送到下一行。我已经寻找了一段时间的答案,但一直找不到任何东西;可能是我只是不知道要搜索什么。 这是列表中 CSS 部分的代码:

li {
display: inline-block;
text-decoration: none;
margin: 2px 4px 3px 4px;
list-style-type: none;
float: left;
display: table-cell;
display: fixed;
background-color: 362C24;

}

【问题讨论】:

  • 请发布您的代码,您尝试过的内容,并尝试为我们提供更好的问题描述。可能有很多方法可以实现您想要的,但没有什么是通用的,并且在任何情况下都可以始终有效。
  • 问题是当我缩短屏幕尺寸的宽度时,它只是将顶部对齐的项目列表向下推到下一行。我想要它做的只是保持列表固定在那里,并允许屏幕大小改变而不改变页面的外观。我尝试在显示和位置上做一些事情,比如使其绝对化并提供表格单元格显示。正如我所说,我还很新,所以我要尝试的东西不是很广泛。
  • 请不要标记您正在使用的编辑器,除非您对此有疑问。没人在乎。

标签: html css


【解决方案1】:

您可以使用静态定位 (http://www.w3schools.com/css/css_positioning.asp),但我认为这不是您在为响应式设计编程时想要做的。您可以使用 flex-box(https://css-tricks.com/snippets/css/a-guide-to-flexbox/),但如果没有空间放置某些东西,它将相应地定位。每个人都在看不同尺寸的屏幕,你想容纳每个人。固定在绝对位置的东西对于桌面来说可能没问题,但由于视口大小众多,我不建议这样做。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-29
    • 2016-08-17
    相关资源
    最近更新 更多