我正在使用这个 CSS 代码:
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 0 0;
}
form > div > div {
margin: 0 0 0 0;
}
form > div > label {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div {
width: 75%;
float: right;
}
form > div > label {
font-size: 90%;
}
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea {
width: 60%;
}
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea,
select {
height:35px;
padding:5px;
color:#F36F25;
font-size:16px;
border: 1px solid #F36F25;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #F36F25;
font-weight:bold;
}
@media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label {
text-align: right;
}
}
使用标签创建响应式 HTML 表单,它工作正常但我不确定如何使标签和表单元素水平内联,表单元素似乎显示低于标签
最佳答案
移除标签元素上的padding
:
form > div > label {
width: 25%;
float: left;
/* padding-right: 10px; */
}
关于html - 带标签的响应式 HTML 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27292619/