html - ANKI CSS/HTML:如何在右下角的浏览器“位置:固定”中制作标签,标签不重叠?
问题描述
有关问题的更多详细信息,请参见视频: https ://streamable.com/td4k8j
我的所有标签在审核时都可见,但我希望它们位于右下角的固定位置(即不随滚动而移动)。当我尝试这个时,它们都在右下角重叠,我怎样才能将它们分开?
我对 HTML/CSS 了解不多,这是我所能得到的常识,请包括代码在内的答案尽可能具体吗?如果没有也没关系,谢谢你的时间。
前端代码(HTML):
<b id="tags-container">{{Tags}}</b>
<script>
var tagContainer = document.getElementById("tags-container")
if (tagContainer.childElementCount == 0) {
var tagList= tagContainer.innerHTML.split(" ");
var kbdList = [];
var newTagContent = document.createElement("div");
for (var i = 0; i < tagList.length; i++) {
var newTag = document.createElement("kbd");
newTag.innerHTML = tagList[i];
newTagContent.append(newTag)
}
tagContainer.innerHTML = newTagContent.innerHTML;
tagContainer.style.cursor = "default";
}
</script>
{{/Tags}}
样式代码(CSS):
/* TAGS */
/* Clickable Tags (need to download the add-on) */
kbd {
display: inline-block;
letter-spacing: .2px;
font-weight: bold;
font-size: 16px !important;
text-shadow: none !important;
padding: 0.05rem 0.1rem !important;
margin: 1px !important;
border-radius: 4px;
border-width: 1.5px !important;
border-style: solid;
background-color: transparent !important;
box-shadow: none !important;
opacity: 0.5;
vertical-align: right;
word-break: break-all;
}
/* Tag Becomes More Visible On Hover */
kbd:hover { opacity: 1; transition: opacity 0.2s ease; }
/* Tag Colors */
kbd:nth-of-type(1n+0) { border-color: #fc00ff; color: #fc00ff; }
kbd:nth-of-type(2n+0) { border-color: #03A9F4; color: #03A9F4; }
kbd:nth-of-type(3n+0) { border-color: #FF0000; color: #FF0000; }
kbd:nth-of-type(4n+0) { border-color: #faed27; color: #faed27; }
kbd:nth-of-type(5n+0) { border-color: #FF9933; color: #FF9933}
kbd:nth-of-type(6n+0) { border-color: #ff6ec7; color: #ff6ec7; }
kbd:nth-of-type(7n+0) { border-color: #8ffcff; color: #8ffcff; }
kbd:nth-of-type(8n+0) { border-color: #ff009a; color: #ff009a; }
kbd:nth-of-type(9n+0) { border-color: #39ff14; color: #39ff14; }
kbd:nth-of-type(10n+0) { border-color: #1b03a3; color: #1b03a3; }
/* Tag Mobile Adjustments */
.mobile kbd { opacity: .9; margin: 1px !important; display: inline-block; font-size: 14px !important; }
.mobile #tags-container {line-height:0.6rem; margin-left: 0px; }
解决方案
将 应用于position: fixed
他们的容器,而不是元素本身。如果没有专门的容器,请创建一个...
推荐阅读
- php - Laravel QrCode::wifi 不接受变量
- c# - 非静态类跨其他类获取数据
- ksqldb - 是否可以保证流中的所有爆炸行都会立即更新到表中?
- julia - 为 Julia 使用 Atom 的 LoadError
- reactjs - 如何在 React JS 中从 Azure Key Vault 检索密钥
- snowflake-cloud-data-platform - 使用 day 列创建一个汇总的周列,并使用一周的第一个星期一填充值:雪花数据库
- html - 如何在输入中嵌入按钮?
- reactjs - 来自动作返回 patternOrChannel 的 Redux-saga 发布数据未定义
- c# - 登录页面上的后台工作人员
- java - 摇摆事件不再触发