【发布时间】：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;
}
#centre1Label1{position: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 包含文件，因为这些文件对于诊断问题很重要 - 您是否查看过任何其他相关问题和答案，例如 stackoverflow.com/questions/24584779/… Bootstrap 对 DOM 做了一些摆弄和我猜这是导致您的问题的原因，但是对于您发布的内容，人们不会倾向于投入太多精力来解决问题，直到他们从您的努力中看到更多投入。
-
@PeterScott 谢谢。添加了我的 javascript 和 css 代码。
标签： javascript html css textarea