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

【问题标题】：How insert a navbar inside a <textarea> or any other element?如何在 <textarea> 或任何其他元素内插入导航栏？
【发布时间】：2019-11-21 16:19:36
【问题描述】：

如果我有这样的 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>

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

【问题讨论】：

有没有可能的元素？我的意思是，外部元素有一个固定的大小，例如 640x480，在里面有一个导航栏，其行为类似于上面的那个？
你想要达到什么目的？
当然，您可以在顶部有一个带有导航栏的 div...这是基本的 HTML，但目前还不清楚您要做什么
可能是这样的 - codepen.io/Paulie-D/pen/NWWJmbZ

标签： html css textarea

【解决方案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>

【讨论】：

您的示例正是我所需要的，但我无法调整文本区域的大小。我可以在上面的代码中进行哪些更改以允许这样做？
@KleberMota 只需找到并删除显示“resize: none”的行。如果您希望容器随文本区域一起扩展，您还必须调整容器，但这是一个好的开始。
好的，我刚刚做了，我现在可以调整文本区域的大小，但是导航栏不跟随宽度的变化。有没有办法在调整文本区域大小时调整导航栏的大小？
@KleberMota 正如我上面所说的：如果您希望容器随文本区域一起扩展，您还必须调整容器。如果您在这部分遇到问题，请随时发布另一个问题以获得进一步的帮助，因为这完全是另一个问题。
好的，我已经做到了； stackoverflow.com/questions/58994464/…