css - 对齐左侧的左侧元素和右侧的右侧元素
问题描述
我正在处理 html 中的表单,并对其应用了 flexbox,左侧元素(公司、电子邮件)在左侧正确对齐,但右侧的元素(姓名和电话)未正确对齐。如何将网格的左列向右对齐?
感谢您的时间!!
这是我所拥有的:
.contact form {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1rem;
background: red;
}
.contact form label {
display: block;
font-size: 15px;
margin-bottom: 5px;
}
.contact form p {
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
}
.contact form .full {
grid-column: 1 / 3;
}
.contact form textarea {
width: 100%;
}
.contact input {
width: 80%;
height: 2rem;
border: 0.5px solid rgb(167, 156, 156);
}
.contact input::-webkit-input-placeholder {
font-size: 12px;
text-indent: 5px;
}
form .contact-to {
width: 100%;
height: 2rem;
}
<div class="contact">
<form action="" class="form">
<p class="full">
<label for="">Contact to</label>
<select class="contact-to" name="request-type">
<option value="candidates">Looking for candidates</option>
<option value="job">Looking for a job</option>
<option value="collaboration">Working with Asia-HR</option>
<option value="other">Other</option>
</select>
</p>
<p>
<label for="">Company</label>
<input type="text" name="company" placeholder="enter the name of your company">
</p>
<p>
<label for="">Name*</label>
<input type="text" name="name" placeholder="enter your name">
</p>
<p>
<label for="">Email*</label>
<input type="email" name="name" placeholder="enter your email">
</p>
<p>
<Label>Phone</Label>
<input type="phone" name="name" placeholder="enter your phone number">
</p>
<p class="full">
<label for="Your message">Your message*</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
</p>
<p class="full">
<input type="file" name="document">
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
解决方案
将 a 设置为grid-column-gap
列之间的空格,并将输入的宽度更改为100%
:
.contact form {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1rem;
background: red;
grid-column-gap: 10%;
}
.contact form label {
display: block;
font-size: 15px;
margin-bottom: 5px;
}
.contact form p {
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
}
.contact form .full {
grid-column: 1 / 3;
}
.contact form textarea {
width: 100%;
}
.contact input {
width: 100%;
height: 2rem;
border: 0.5px solid rgb(167, 156, 156);
}
.contact input::-webkit-input-placeholder {
font-size: 12px;
text-indent: 5px;
}
form .contact-to {
width: 100%;
height: 2rem;
}
<div class="contact">
<form action="" class="form">
<p class="full">
<label for="">Contact to</label>
<select class="contact-to" name="request-type">
<option value="candidates">Looking for candidates</option>
<option value="job">Looking for a job</option>
<option value="collaboration">Working with Asia-HR</option>
<option value="other">Other</option>
</select>
</p>
<p>
<label for="">Company</label>
<input type="text" name="company" placeholder="enter the name of your company">
</p>
<p>
<label for="">Name*</label>
<input type="text" name="name" placeholder="enter your name">
</p>
<p>
<label for="">Email*</label>
<input type="email" name="name" placeholder="enter your email">
</p>
<p>
<Label>Phone</Label>
<input type="phone" name="name" placeholder="enter your phone number">
</p>
<p class="full">
<label for="Your message">Your message*</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
</p>
<p class="full">
<input type="file" name="document">
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
推荐阅读
- dask - Dask DataFrame .head() 索引后非常慢
- linux - readdir/File::Find::Rule 没有读取 perl 中的子目录及其内容
- json - Django REST Framework:空 ListView 上的顶级 JSON 数组是否存在安全风险?
- wpf - 在 WPF 应用程序中向 ComboBox 添加文本和值
- android - 通过 gRPC/Protobuf 进行通信
- python - 如何将 Python 列表转换为有效的 JSON 路径?
- ios - ISO 8601 日期的正确日期格式
- vue.js - [Vue 警告]:您可能在 watcher 中有一个无限更新循环,表达式为“chartData”
- c# - 演员表