Question

我用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;
 }

Answer 1

你有：

#seperator {
  margin-top: 180px;
  padding: 0;
}

当你没有#upperModal的50px高度时，该边距会推动hr。

Answer 2

我并不完全清楚你在问什么，但我把你的代码移植到JsFiddle（https://jsfiddle.net/pscott_au/5wLassmw/）

我清理了一些不匹配的href，并且能够毫无问题地获得2个textareas .. 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无法正常工作

2 个答案: