没有 DIV 标记的 TextArea 无法正常工作
Posted
技术标签:
【中文标题】没有 DIV 标记的 TextArea 无法正常工作【英文标题】：TextArea not working fine without a DIV tag 【发布时间】：2016-10-05 23:08:11 【问题描述】：我用 html 设计了一个简单的模态框。
现在在模态中，我尝试使用 hr 标签水平创建 2 个部分。它工作正常，部分已创建。
在此之后，我尝试在上部放置一个文本区域。我能够成功放置文本区域。然而，将文本区域放在那里会导致分隔符（hr 标记行）进一步向下移动。
但是，当我将代码的文本区域部分放在 div 元素中并提供宽度和高度时，它工作正常。
请谁能解释一下为什么没有 div 元素它无法工作。
如果没有DIV标签也可以工作，那怎么可能？
HTML 代码：
<html>
<link href="showTutorial.css" rel="stylesheet"/>
<body >
<script src="showTutorial.js" type="text/......script"></script>
<div id="left1">
<ol>
<li>
<a href="#">What is ....</li>
<li>
<a href="#">What </li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
</ol>
</div>
<div id="centre1">
<h1 id="centre1Label1">What is .....</h1>
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<div id="upperModal">
<textarea id="textAreaId" rows="14">Hello</textarea>
</div>
<hr id="seperator"/>
<div>
<p>Some text in below.</p>
</div>
</div>
</div>
</div>
<div id="right1" >
</div>
</body>
</html>
javascript 代码：
var modal,btn,span;
window.onload=function()// Get the modal
modal = document.getElementById('myModal');
// Get the button that opens the modal
btn = document.getElementById('myBtn');
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function()
modal.style.display = "block";
span.onclick = function()
modal.style.display="none";
CSS 代码：
#left1
width:170px;
background:#EDD8B3;
float:left;
position:relative;
top:180px;
left:5px;
border: 3px solid grey;
font-size: 1.2em;
padding:0;
margin:0;
body
background-color:#EDD8B3;
margin:0;
padding:0;
#centre1
width:620px;
height:800px;
left:10px;
background:white;
float:left;
position:relative;
top:180px;
box-shadow: 3px 3px grey;
margin:0;
padding-right: 450px;
#right1
margin:0;
padding:0;
ol
list-style-type:none;
background: #EDD8B3;
padding-top:2px;
margin-top:0.1px;
ol li
border-bottom: 2px solid #f0f0f0;
display:list-item;
padding:5px;
margin-left:2px;
margin-right:0.2px;
margin-bottom:2px;
margin-top:10px;
ol li a text-decoration:none;
color:#008080;
#centre1Label1position:relative;left:480px;padding:0; margin-right:30px;
.modal
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 1300px; /* Full width */
height: 1000px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
/* Modal Content */
.modal-content
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 1000px;
height:450px;
/* The Close Button */
.close
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
.close:hover,
.close:focus
color: #000;
text-decoration: none;
cursor: pointer;
#seperator
margin-top:180px;
padding:0;
#textAreaId
padding:0;
margin:0;
min-width:100%;
#upperModal
height:50px;
【问题讨论】：
你能在 jsfiddle 或 codepen 上分享你的代码吗？ 除非您共享代码，否则您会要求人们根据您的描述对其进行逆向工程，这是一个很大的期望。第一个可能的解决方案是禁用引导程序，看看是否有帮助。 @PeterScott 感谢您的建议。添加代码。 您能否包含 javascript 和 css 包含文件，因为这些文件对于诊断问题很重要 - 您是否查看过任何其他相关问题和答案，例如 ***.com/questions/24584779/… Bootstrap 对 DOM 做了一些摆弄和我猜这是导致您的问题的原因，但是对于您发布的内容，人们不会倾向于投入太多精力来解决问题，直到他们从您的努力中看到更多投入。 @PeterScott 谢谢。添加了我的 javascript 和 css 代码。 【参考方案1】：你有：
#seperator
margin-top: 180px;
padding: 0;
当您没有 #upperModal 的 50 像素高度时，该边距会向下推 hr。
【讨论】：
【参考方案2】：我不完全清楚你在问什么，但是我已将你的代码移植到 JsFiddle (https://jsfiddle.net/pscott_au/5wLassmw/)
我清理了一些不匹配的href，并且能够毫无问题地获得2个文本区域..https://jsfiddle.net/pscott_au/5wLassmw/7/
你能澄清你在问什么吗？
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<div id="upperModal">
<textarea id="textAreaId" rows=14>Hello</textarea>
</div>
<hr id="seperator"/>
<p>Some text in below.</p>
<textarea id="textAreaId" rows=14>Hello</textarea>
</div>
【讨论】：
以上是关于没有 DIV 标记的 TextArea 无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
将 div HTML 复制到 textarea 但保留换行符 [重复]
当我使用 textarea 标签时，php 无法正常使用 textarea 标签并显示其余的 html 标签 [重复]