javascript - 调整页面大小时,如何使我的表单项响应并对齐?
问题描述
所以我有一个表单,大部分情况下我都很满意,但是当页面调整大小时,外观/功能会消失在窗口之外......我如何制作它,以便表单项在下方 1 排 1 排列彼此保持 100% 相同(或相似)的外观?
此外,如果您注意到,流派下拉菜单比其他下拉菜单略短......有什么办法解决这个问题?
HTML:
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
padding: 10px;
border-radius: 20px;
text-align: center;
width: 25%;
background-color: #e0e0e0;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea,
select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="row">
<div class="col">
<label for="title">Title:</label><input type="text" id="title" placeholder="Title of the film (and year)">
<label for="image">Image:</label><input type="text" id="image" placeholder="URL to artwork for the film">
<label for="trailer">Trailer:</label><input type="text" id="trailer" placeholder="URL to trailer for the film">
<label for="rating">Rating:</label><input type="number" id="rating" min="1" max="10" placeholder="How do you rate this film out of 10?">
</div>
<div class="col">
<label for="genre">Genre:</label>
<select id="genre">
<option value="" disabled selected>What genre does the film fit into?</option>
<option value="action">Action</option>
<option value="comedy">Comedy</option>
<option value="horror">Horror</option>
<option value="other">Other</option>
</select>
<label for="synopsis">Synopsis:</label>
<textarea rows="9" id="synopsis" placeholder="What is the story behind the film? (Spoiler alert!)"></textarea>
</div>
</div>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
解决方案
您可以使用媒体查询来解决您的问题。
只需将其添加到您的 CSS 中:
@media only screen and (max-width: 700px) {
.row{
grid-template-columns:1fr;
}
}
推荐阅读
- tensorflow - 如何正确预测 Keras 回归问题中的负值?
- python - 您缺少依赖项!# 强制:spyder_kernels >=2.0.1,<2.1.0 : 2.0.1 (NOK)
- java - 如何从xml java中删除元素
- python - 如何在python中找到数据框的SUMPRODUCT和OFFSET
- swift - 将 UITableView 与合并数据源绑定
- javascript - 是否可以使用 fabric.js 对不同级别的对象进行分组?
- web-config - Web.config 重定向多个文件
- javascript - 如何强制 Express.js 产生带有特殊字符的参数?
- javascript - 是否可以在 Facebook Messenger 中轮播按钮模板?
- mysql - MariaDB shell 不显示 Unicode 字符