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相比具有相同的大小，则需要对它们进行单独设计和计算。随后的列表不能给出与顶部相同的百分比样式，它们需要加倍/减半/标准化。

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

我的问题：

是否可以忽略已定义为fixed / relative / absolute的父坐标空间，以便100%表示100% body？
我是否遗漏了HTML / CSS关系背后的哲学，以及如何最好地利用它？
如果我继续网络开发，我会在35岁之前把头发撕掉吗？

声明：

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

Answer 1

我对你想要达到的目标感兴趣。这不是我曾经做过的事情，但你提出了一个有趣的观点。我也认为你可能误解了一些继承的工作方式。仅仅因为你在元素上放置相对定位并不会改变子元素获得宽度的方式。百分比宽度总是根据其父元素得到它们的宽度，无论它是相对位置还是其他任何元素。在大多数情况下，父母填补了它的父母等空间。当涉及到CSS时，肯定需要掌握一定数量的“禅”，是的，继续进行网络开发可能会导致头发丢失！买一个压力球，你应该没事:)至于高度，这是一个不同的故事，因为它是地狱的车，通常不会拿起它的父母的身高。

你在使用百分比时必须要小心，如果你要使用你的风格通用并且你有父/子关系，那么确实字体大小会随着你的指出而减少。诀窍是在样式方面将百分比放在节点树的末端，并将更多通用样式上不影响自身的其他东西（颜色等）放在更高的位置。

在大多数情况下，您可以达到要求，但有时需要进行一些规划。

但正如你所说的，如果你定位一些相对的东西，然后将一些绝对的东西放在嵌套的水平里面，那么它总是能够从它的祖先中的第一个元素中找出相对或绝对定位的位置。除非你点击javascript并动态做一些计算，否则我很确定没有办法解决这个问题。

嵌套列表和百分比

1 个答案: