如何在CSS和HTML中对齐垂直文本框？
如何在CSS和HTML中对齐垂直文本框？
提问于 2018-08-07 05:12:12
我是一个初学者在前端(从昨天开始)，我正在通过FreeCodeCamp学习。我正在尝试建立一个调查网站。我想要将我的文本框的左侧在底部向下与左侧文本框的左侧在顶部对齐。我尝试更改text-align元素的属性，但这并不合理。如果这个问题已经被问过了，我很抱歉。我不能把以前的答案和我的联系起来。
这是我的代码：
body {background-color: #98AFC7;}
#title{
text-align: center;
font-family: Arial, Times, serif;
font-style: oblique;
color: white;
}
#screen-belly{
background-color: rgb(250, 250, 250);
margin: 0 auto;
border-radius: 4px;
width: 75%%;
max-width: 1000px;
padding: 10px;
padding-top: 20px;
}
p{
text-align: center;
font-family: monospace, serif;
font-size: 15px;
}
.rightTab {
display: inline-block;
text-align: left;
width: 48%;
vertical-align: middle;
}
.leftTab {
display: inline-block;
text-align: right;
width: 48%;
vertical-align: middle;
}
.eMailTab{
display: inline;
text-align: right;
width: 48%;
}
.name-fields {
height: 20px;
width: 140px;
padding: 5px;
margin: 10px;
border: 1px solid #c0c0c0;
border-radius: 2px;
}
.input-field {
height: 20px;
width: 280px;
padding: 5px;
margin: 10px;
border: 1px solid #c0c0c0;
border-radius: 2px;
}<h1 id="title">Survey Form</h1>
<div id="screen-belly">
<p>Please take the short Survey to hep us improve our services</p>
<div class="rowTab">
<div class="leftTab">
<input autofocus type="text" name="name" id="name" class="name-fields" placeholder="First name" required>
</div>
<div class="rightTab">
<input autofocus type="text" name="name" id="name" class="name-fields" placeholder="Last Name" required>
</div>
</div>
<div class="eMailTab">
<input autofocus type="text" name="email" id="email" class="input-field" placeholder="e-Mail address" required>
</div>
</div>
</div>
这是我的CodePen链接，你可以看到我在说什么：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-07 06:02:58
您可以使用flexbox轻松实现这一点。我对你的HTML和CSS做了一些修改以使其正常工作。
body {
background-color: #98AFC7;
}
#title {
text-align: center;
font-family: Arial, Times, serif;
font-style: oblique;
color: white;
}
#screen-belly {
background-color: rgb(250, 250, 250);
margin: 0 auto;
border-radius: 4px;
width: 75%;
max-width: 1000px;
padding: 10px;
padding-top: 20px;
}
p {
text-align: center;
font-family: monospace, serif;
font-size: 15px;
}
.container {
width: 75%;
max-width: 600px;
margin: 0 auto;
}
.row {
display: flex;
}
input {
flex: 1;
height: 20px;
min-width: 0;
padding: 5px;
margin: 10px;
border: 1px solid #c0c0c0;
border-radius: 2px;
}<h1 id="title">Survey Form</h1>
<div id="screen-belly">
<p>Please take the short Survey to hep us improve our services</p>
<div class="container">
<div class="row">
<input autofocus type="text" name="name" id="name" placeholder="First name" required>
<input type="text" name="name" id="name" placeholder="Last Name" required>
</div>
<div class="row">
<input type="text" name="email" id="email" placeholder="e-Mail address" required>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-08-07 05:23:54
通过将div设置为宽度，您可以有效地删除display:inline属性。因此，文本元素实际上是右对齐的，但是如果没有完整的48%宽度，文本框就会留在原处。https://codepen.io/anon/pen/pZOPPV。然而，这可能不是做这些事情的最佳方式。尝试inline-block：
.eMailTab{
display: inline-block;
text-align: right;
width: 62%;
}若要使电子邮件和名字框的左侧对齐，请调整电子邮件框的宽度。
如果您想查看width属性的实际规范，那么答案是适当的：https://stackoverflow.com/a/22487952/462006
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51715696
复制相关文章
相似问题