html - 嵌套列表和百分比

Question

将您的设计和功能分开是一个公认的概念。美好的。在这种情况下，让我们分离 HTML 和 CSS，特别是菜单层次结构的组织。

嵌套问题<ol> , <ul>和 <li>是它们似乎完全违反基于百分比的样式(在响应式设计的环境中)。

我的问题:

我有一个几层深的列表，如下所示:

<ul>
  <li>
    <a>Item 1</a>
    <ul>
      <li>
      <a>Submenu 1</a>
        <ul>
          <li>
            <a>Submenu 1 (1)<a>
          </li>
          <li>
            <a>Submenu 1 (2)<a>
          </li>
          <li>
            <a>Submenu 1 (3)<a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

假设我想以 relative 的方式设置此列表的样式或 absolute到文档的正文，用于响应式网页设计。所以我设计了顶部ul有办法继续往下看:

body > ul{

  position:relative;

  width:20%;

}

一切都很好。但是，如果我随后需要给 <li> 提供绝对位置或相对宽度/高度怎么办？嵌套在列表的更深处？他们现在坚持顶级的百分比样式 <ul> (因为它已被定义为 relative )。这基本上意味着如果我希望所有列表项与 window 相比大小相同，则它们需要单独设置样式和计算。 .后续列表不能使用与顶部相同的百分比样式，它们需要加倍/减半/ SCSS 。

这似乎与分离样式和形式的整个过程完全违反直觉。表单 (HTML) 应确定数据的关系，而样式 (CSS) 应确定可视化并提供以其认为合适的任何方式“分离”表单的能力。

我的问题:

1. 是否可以忽略已定义为 fixed 的父坐标空间？/relative/absolute这样 100%表示 100%的 body ?

2. 我是否遗漏了 HTML/CSS 关系背后的哲学，以及如何最好地利用它？

3. 如果我继续做网络开发，我会在 35 岁时把头发都扯光吗？

免责声明:

我正在寻找能让我内心平静的答案，而不是针对单一浏览器的单一修复。如果答案是“无法完成”，请解释为什么以及您对无法完成的事实感到高兴。

Answer 1

我对您要实现的目标很感兴趣。这不是我必须做的事情，但你提出了一个有趣的观点。我还认为您可能误解了某些继承的工作方式。仅仅因为您将相对定位放在元素上并不会改变子元素获取其宽度的方式。百分比宽度总是根据它们的父元素获得它们的宽度，无论它是相对定位的还是其他什么。在大多数情况下，父级填充其父级的空间，等等。当涉及到 CSS 时，肯定需要掌握一定数量的“禅”，是的，继续进行 Web 开发可能会导致脱发!买一个压力球，你应该没问题:)至于高度，那就是另一回事了，因为它有很多问题，而且通常不会达到 parent 的高度。

不过，在使用百分比时你必须要小心，如果你的样式是通用的并且你有父/子关系，那么字体大小确实会像你指出的那样减小。诀窍是根据样式将百分比放在节点树的末尾，并将其他不影响自身的东西(颜色等)放在更高的更通用的样式上。

在大多数情况下，您可以达到要求，但有时确实需要一些计划。

但是正如您所说，如果您将某物定位为相对的，然后将某物定位在嵌套级别的绝对位置，那么它将始终计算出它从其祖先中的第一个元素开始的位置，该元素已被赋予相对或绝对定位。我很确定没有办法解决这个问题，除非您使用 javascript 并即时进行一些计算。