HTML 代碼在 codepen 中有效，但在其他文本編輯器中無效

Question

我的網站需要一個導航菜單，所以我在網上搜索了一些選項，我在 codepen 中找到了一個，我復制粘貼到我的文本編輯器中並看到了預覽，但代碼在預覽中沒有正常運行。

這里附上codepen 編輯器的鏈接：

我希望在文本編輯器的預覽中使用代碼筆的相同輸出

 html, body { font-family: sans-serif; font-size: 14px; color: #555555; height: 100%; width: 100%; margin: 0; } .container { left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); } .selector { padding: 0.25rem; background-color: #efefef; width: min-content; border-radius: 12px; position: relative; } .selector-item { white-space: nowrap; padding: 0.75rem 1.5rem; cursor: pointer; z-index: 2; user-select: none; transition: color 0.2s ease; } .selector-item--active { color: white; } .highlight { background-color: #ff4757; border-radius: 8px; position: absolute; left: 0.25rem; width: 4.75rem; height: 2.6rem; z-index: 1; box-shadow: 0px 0px 12px -2px rgba(255, 71, 86, 0.9); transition: left 0.2s ease, width 0.2s ease; }

 <div class="container"> <div class="selector" self="size-x1" layout="row center-left"> <div class="highlight"></div> <div class="selector-item" onclick="selectItem(event)">Chapter-wise</div> <div class="selector-item" onclick="selectItem(event)">Year-wise</div> <div class="selector-item" onclick="selectItem(event)">Others</div> </div> </div>

Answer 1

您需要在頁面中添加以下引用。

https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css