我开始做cookies 横幅了.为了尽可能简化我的问题,我在W3School try it编辑器中粘贴了以下内容:

<dialog open style="position:fixed;right:0;">
  <button>Decline</button>&nbsp;
  <button>Allow cookies</button>
</dialog>

预期结果:它应该位于视区的右侧.实际结果:对话框在视口中居中.

当我将上面的代码编辑为使用div而不是对话框时,它会按预期工作:

<div style="position:fixed;right:0;">
  <button>Decline</button>&nbsp;
  <button>Allow cookies</button>
</div>

按其应有的方式移至视区的右侧.

如何从HTML5对话框标记中获取此行为?

感谢人们在这里所做的一切出色的工作.

推荐答案

body {
  margin: 0;
  /* for testing */
  min-height: 200vh;
}

dialog {
  position: fixed;
  right: 0;
  margin: unset;
  inset-inline-start: unset;
}
<dialog open>
  <button>Decline</button>&nbsp;<button>Allow cookies</button>
</dialog>

事实上,你可以用right: 0;个,因为浏览器风格有inset-inline-end: 0;个.但我不是right: 0;%确定所有浏览器都有这个功能.

Html相关问答推荐

有没有可能一个按钮,有焦点,然后再次点击它清除它的焦点,只是使用css?

需要关于HTML的建议

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

有没有一种方法可以很容易地将这个div从底部:0转换到顶部:0?

如何使用css创建六边形棋盘?

柔性盒内的物品;t覆盖整个宽度,即使设置为100%

如何在小屏幕中制作水平滚动div

如何使 CSS 网格项目像 Flexbox 项目一样匹配父级的高度

在 laravel 中使用 DomPDF 将数据导出为 pdf 时,第二列被拉伸

如何保持块扩展以填充视口?

排列卡片时遇到困难

文本不显示在 div 下方

模拟另一个输入值设置表单输入的数值

如何让一个 div 元素粘在另一个元素上?

如何从 razor 页面打开 html 页面

我如何让这个动画播放,然后停止,然后在设定的时间后再次播放? (CSS)

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条?

SVG 适用于 Safari,不适用于 Chrome

无法使用 Reactjs 多次更新本地存储

如何使用 html 和 css 添加超链接功能