Javascript TextArea没有DIV标签工作不正常_Javascript_Html_Css_Textarea

Javascript TextArea没有DIV标签工作不正常

javascript html css

Javascript TextArea没有DIV标签工作不正常,javascript,html,css,textarea,Javascript,Html,Css,Textarea,我用HTML设计了一个简单的模式框现在，在模式中，我尝试使用hr标记水平创建2个部分。效果很好，并且创建了部分在这之后，我试着在上面的部分放一个文本区域。我能够成功地放置文本区域。但是，将文本区域放置在此处会导致分隔符（hr标记线）进一步向下移动但是，当我将代码的文本区域部分放在div元素中并提供宽度和高度时，它工作得很好请任何人解释一下为什么没有div元素它就不能工作如果可以在没有DIV标签的情况下工作，那怎么可能呢 HTML代码： <html> <link

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

你有：

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

当你没有#upperModal的50px高度时，边距会向下推

hr

。

我不完全清楚你在问什么，但是我已经将你的代码移植到了JSFIDLE（）

我清理了一些不匹配的HREF，并且能够毫无问题地获得2个文本区域

你能澄清你的问题吗

<!-- 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>


x
你好

下面是一些文本
你好

你能在JSFIDLE或codepen上共享你的代码吗？除非你共享代码，否则你会要求人们根据你的描述进行反向工程，这是一个很大的期望。第一种可能的解决方案是禁用引导，看看这是否有帮助。@PeterScott谢谢你的建议。添加了代码。您是否可以包含javascript和css包含文件，因为这些文件在诊断问题时非常重要-您是否查看过其他相关问题和答案，例如Bootstrap对DOM进行了一些修改，我猜这是导致您出现问题的原因，但您发布的内容不会引起人们的兴趣在他们从你的努力中看到更多的投入之前，花太多的精力解决这个问题。@PeterScott谢谢。添加了我的javascript和css代码。

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

<!-- 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>