如何在 <textarea> 或任何其他元素中插入导航栏？

Question

如果我有这样的css：

  .navbar {
    grid-area: header;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .navbar ul {
    list-style-type: none;
  }

  .navbar ul li {
    display: inline;
  }

  .navbar ul li a {
    color: white;
    padding: 8px 16px;
    text-decoration: none;
  }

  .navbar ul li a:hover {
    background-color: #555;
    color: white;
    height: 100%;
  }

我可以在页面顶部添加导航栏：

  <body>
    <div class="navbar">
      <ul>
        <li><a href="#">teste1</a></li>
        <li><a href="#">teste2</a></li>
        <li><a href="#">teste3</a></li>
      </ul>
    </div>
  </body>

我怎么能做到这一点，但导航栏在元素内，如 <textarea>?

<textarea name="name" rows="25" cols="80">
  <div class="navbar">
    <ul>
      <li><<a href="#">teste1</a>/li>
      <li><<a href="#">teste2</a>/li>
      <li><<a href="#">teste3</a>/li>
    </ul>
  </div>
</textarea>

我尝试了上面的代码，但是当我在浏览器中可视化页面时，代码显示在文本区域内，而不是显示导航栏。

Answer 1

虽然确实不能将元素嵌套在实际的 textarea 元素中，但这并不意味着无法完成所描述的任务，只需查看 textarea 你在这里输入答案。

我为您的目标推荐的是创建一个包装器 div（我们称之为 textarea-with-nav），将您的导航栏和 textarea 插入其中 div，并以这种方式设置样式。您将在下面找到禁用调整大小的最小示例。

html, body {
 margin: 0;
 height: 100%;
}
.primary-content {
 padding-top: 55px;
}
.navbar {
 grid-area: header;
 overflow: hidden;
 background-color: #333;
 width: 100%;
        z-index: 1;
}
.navbar.site-nav {
 position: fixed;
 top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
 color: white;
 padding: 8px 16px;
 text-decoration: none;
}
.navbar ul li a:hover {
 background-color: #555;
 color: white;
 height: 100%;
}
.textarea-with-nav {
        transform: translate(50%);
 width: 400px;
 height: 300px;
 position: realtive;
 border-radius: 5px;
 border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
 border: none;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 width: 396px !important;
 height: 246px !important;
 resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }

<div class="navbar site-nav">
 <ul>
  <li><a href="#">teste1</a></li>
  <li><a href="#">teste2</a></li>
  <li><a href="#">teste3</a></li>
 </ul>
</div>
<div class="primary-content">
 <div class="textarea-with-nav">
  <div class="navbar">
   <ul>
    <li><a href="#">teste1</a></li>
    <li><a href="#">teste2</a></li>
    <li><a href="#">teste3</a></li>
   </ul>
  </div>
  <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat lacus nisi, eu pretium mi lacinia tempor. Nullam sit amet congue justo. Pellentesque non enim volutpat, vestibulum lacus sed, lacinia est. Duis tempus tincidunt lectus non cursus. Vestibulum tempor, velit sit amet ullamcorper congue, nisl urna consequat sem, eu fringilla tellus lorem suscipit lectus. Integer vel scelerisque dolor. Praesent vulputate diam laoreet auctor tristique. Curabitur venenatis odio tincidunt felis elementum, eu lobortis elit fringilla. Vestibulum lacus arcu, euismod ut lobortis sit amet, vehicula sit amet massa. Etiam quis enim et arcu ullamcorper ullamcorper. In eu lacus dolor. Fusce at vestibulum sapien. Etiam at nisl ut purus molestie euismod vel et urna.

Fusce maximus arcu eget diam efficitur, ut dignissim ipsum ultrices. Duis est magna, dapibus vel pharetra vitae, tincidunt et ligula. Nam dapibus blandit nisi, eget ultricies magna tempor ac. Proin euismod, ipsum quis malesuada mollis, magna libero elementum nisl, et ullamcorper enim nulla vitae lectus. Nulla facilisi. Etiam at aliquam justo. Cras ut sollicitudin eros. Nam vitae sapien commodo, condimentum justo aliquam, sodales justo. Maecenas eu odio placerat, tincidunt lectus non, dapibus felis. Aliquam in cursus dui, sed dictum lectus. Phasellus tincidunt facilisis gravida. Donec augue mauris, elementum id lobortis sed, commodo vel metus. Sed sit amet sollicitudin diam.</textarea>
 </div>
</div>

如何在 <textarea> 或任何其他元素中插入导航栏？

How insert a navbar inside a <textarea> or any other element?

html

css

textarea