Question

我想自由浮动一个DOM块，它恰好包含一个<UL>，相对于一个元素，恰好在<UL>中，并且我想要该块的布局DOM不是其父级的功能。好像它是<body>元素的直接子元素。

HTML

<UL><LI>aaa</LI></UL>
<HR>
<UL>
  <li>
    <span class="r">x-<div class="freefloat">
      <UL><LI>aaa</LI></UL>
    </div></span>
  </li>
  <li>hello world</li>
</UL>

CSS

.r { position: relative; }
.freefloat { position: absolute; top: 0px; left: 1em; }

在示例中，两个包含aaa项的列表以不同的项目符号结尾。可以禁止/覆盖该特定属性，但是如何将所有内容“重置”为顶级范围内的内容？

https://jsfiddle.net/tfy172x0/3/

Answer 1

您的问题让我有些困惑。似乎您正在尝试做某事-但您没有告诉我们这是什么。也许只是解释理想的结果会有所帮助。

我想自由浮动一个DOM块，该DOM恰好包含一个相对于元素的，恰好在一个
中

好。但是我不确定我会把它称为自由浮动。

这听起来像是下拉菜单或其他内容，但确实很神秘；）

...如何将所有内容“重置”为顶层状态范围？

在这种情况下，您可以使用initial https://developer.mozilla.org/en-US/docs/Web/CSS/initial /但我不认为它可以“重置所有内容”-我认为没有办法。通常-我会使用meyer重置来重置所有内容-并仍然明确定义列表样式。

ul {
  border: 1px solid red;
}

.free-willy {
   position: relative;
}

.free-willy ul {
  position: absolute;
  top: 0;
  left: 1em;

  background-color: lightgray;
  padding-right: 1rem;

  list-style: initial;
}

<ul class="z">
  <li>a</li>
  <li>b</li>
</ul>

<ul>
  <li>1</li>

  <li class='free-willy'>
    <span>2</span>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </li>

  <li>3</li>
</ul>

这是您想要的吗？

更新：

我认为我们在术语上存在一些冲突。对于CSS，您可能太聪明了。哈哈。好的，所以“根据他们的位置而定”令人困惑，但我认为这有助于弄清问题的核心。

这里发生了两件事。

听起来像您仍然习惯CSS中the 'Cascade'的想法。我知道这似乎很疯狂...但是您必须拥抱它。有种方式可以对组件进行范围界定，以使它们不会继承具有更高级设置的父项/但这并不值得。
每个浏览器都有一套标准样式，这些样式会强加给您的代码。 “嵌套” ul具有一个不同的点，因为chrome决定了这一点。

一些要看的东西：

https://meyerweb.com/eric/tools/css/reset/这将“重置” CSS（通过覆盖默认值）以删除-由任何浏览器设置的几乎所有样式。

正在使用的：https://jsfiddle.net/sheriffderek/v3p1t5b2/

Answer 2

ul {
  list-style-type: disc;
}

布局与上下文无关的HTML元素

2 个答案: