我正在尝试根据视口定位一些列表的元素,但它们最终会坚持他们的父母.

要重现这个问题,我只需要创建一个绝对定位元素的列表:

body {
  background-color: lightgray;
}

ul {
  position: absolute;
  top: 50px;
  left: 50px;
  list-style: none;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

<ul>
  <li>
    <div class="element">
      <p>
        Element
      </p>
    </div>
  </li>
</ul>

如您所见,元素不位于视口的左上角,而是相对于视口ul.

我错过了什么吗？它可能是li元素的静态位置吗？

介绍

我正在尝试建立一个可用于多种文化、具有不同阅读方向的网站。

为此，我只需dir="rtl"在我的根 HTML 元素上添加该属性。

我的问题是我有一些特定于一个方向或另一个方向的 CSS 规则（大多数情况下是边距或填充）。

使用属性选择器尝试失败

我认为我可以简单地使用属性选择器，但该dir属性仅设置在根元素上，所以这不起作用：

selector {
  &[dir="ltr"] {
    // LTR specific
  }

  &[dir="rtl"] {
    // RTL specific
  }
}

例如，在这个演示中，如果应用程序rtl在标准 中，则标题在右侧应该有 5px 的边距，如果在标准 中，则在左侧ltr。

其他想法

我注意到direction正确设置为rtl，有没有办法在 aCSS或Sass选择器中使用该规则？

编辑和精度

好像忘记了很重要的一点。我正在使用 Vue.js 构建网站，该dir属性在主组件 ( App) 中是 bind并且 RTL/LTR 特定的 CSS 规则可以在同一组件或其他自包含组件中。

我有一个日期格式如下:

四位数的年份,然后是两位数的周数.

例如,2018年的第四周将是20 1804年.

我在使用Java 8的LocalDate和DateTimeFormatterBuilder解析这些日期时遇到了麻烦.

以下是我尝试解析日期的方法:

LocalDate.parse(
    "201804",
    new DateTimeFormatterBuilder().appendPattern("YYYYww").parseDefaulting(WeekFields.ISO.dayOfWeek(), 1).toFormatter()
);

执行会抛出以下异常:

java.time.format.DateTimeParseException:无法在索引0处解析文本"201804"

奇怪的是,当我在日期部分之间添加一个分隔符时,不再抛出异常:

LocalDate.parse(
    "2018 04",
    new DateTimeFormatterBuilder().appendPattern("YYYY ww").parseDefaulting(WeekFields.ISO.dayOfWeek(), 1).toFormatter()
);

结果是 :

2018年1月22日

格式化板是否缺少一些东西？

我想实现一个输入字段，如果需要，用户可以解锁该输入字段。

从视觉上看，我认为按钮应该位于字段外部或内部，但与其紧密相连。

为此，我一直在使用Vuetify 文本字段的 append-outer-iconprops ：

模板：

<v-text-field
  v-model="message"
  :append-outer-icon="icon"
  @click:append-outer="locked = !locked"
  :disabled="locked"
></v-text-field>

这是脚本：

data: () => ({
  message: '',
  locked: true,
}),
computed: {
  icon () {
    return this.locked ? 'lock' : 'lock_open'
  }
},

这是 Codepen 的链接： https: //codepen.io/anon/pen/jQaJPK

但是，当输入被禁用时，无法单击该按钮。

有什么方法可以在输入不使用此方法时启用按钮，或者我是否被迫将按钮和输入分开？

如您在本示例中看到的，我有一个带有value数据的全局mixin 和对该数据的观察者：

Vue.mixin({
    data() {
    return {
        value: 'test',
      mixinWatcher: false,
    };
  },
  watch: {
    value: {
        handler() {
        console.log('mixin');
        this.mixinWatcher = true;
      },
        immediate: true,
    },
  },
});

我也有两个组成部分：

• NoMergeComponent没有任何观察者。我希望该组件使用默认的观察程序。
• MergeComponent 那应该覆盖默认的观察者。

是否有可能覆盖mixin的监视程序，还是我应该找到另一种方法，例如手动删除监视程序？

我还认为我可以通过将方法绑定到观察程序来解决此问题，并重写此方法而不是整个监视程序。