表单位于父 div 内部，位于该 div 外部

Question

我是新编程人员，正在使用 python 和 Flask 以及 sqlalchemy(sqlite) 构建一个应用程序。 我正在制作一个博客的 Flask 应用程序，该应用程序有一个添加文章 html 文件，其中是将文章的标题和正文上传到数据库的表单。

所以，我所做的是用类“forms”制作一个 div，其中包含表单。在该表单中，每行和每列都有更多的 div。

我的问题是 div“表单”位于表单和 div 之外（查看图像），我想知道为什么因为我在做 div，所以我可以在里面填充表单并使其响应更容易。 红色边框来自“forms”div。

我已经检查过 div，所有内容都在里面。

问题图片

代码（mre）：

label {
    display: inline-block;
    padding: 5px;
}

.forms{
    width: 100%;
    height: 100%;
    margin-top: 10px;
    border: 2px solid salmon;
    border-radius: 4px;
    padding: 10px;

}

.col-75{
    float: left;
    width: 75%;
    margin-top: 6px;
}

input[type=text], textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    resize: vertical;
  }
  

.col-25{
    float: left;
    width: 25%;
    margin-top: 6px;
}

<div class="forms">
    <form action="{{ url_for('add_article') }}" method="post">
        <div class="row">
            <div class="col-25">
                <label for="title">Title</label>
            </div>
            <div class="col-75">
                <input type="text" id="title" name="title" placeholder="Insert your title..">
            </div>
        </div>
        <div class="row">
            <div class="col-25">
                <label for="article">Article Body</label>
            </div>
            <div class="col-75">
                <textarea name="article" id="article" placeholder="Enter the body of the article:"></textarea>
            </div>
        </div>
    </form>
</div>

Answer 1

这就是

float

在 CSS 中的作用。 它将内容“浮动”在其容器之上/之外。 删除那些：

label {
    display: inline-block;
    padding: 5px;
}

.forms{
    width: 100%;
    height: 100%;
    margin-top: 10px;
    border: 2px solid salmon;
    border-radius: 4px;
    padding: 10px;

}

.col-75{
    /* float: left; */
    width: 75%;
    margin-top: 6px;
}

input[type=text], textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    resize: vertical;
  }
  

.col-25{
    /* float: left; */
    width: 25%;
    margin-top: 6px;
}

<div class="forms">
    <form action="{{ url_for('add_article') }}" method="post">
        <div class="row">
            <div class="col-25">
                <label for="title">Title</label>
            </div>
            <div class="col-75">
                <input type="text" id="title" name="title" placeholder="Insert your title..">
            </div>
        </div>
        <div class="row">
            <div class="col-25">
                <label for="article">Article Body</label>
            </div>
            <div class="col-75">
                <textarea name="article" id="article" placeholder="Enter the body of the article:"></textarea>
            </div>
        </div>
    </form>
</div>