创建表单,并希望将标签放在输入文本的左上角。目前通过在标签上设置保证金权限来进行工作 - 但我不认为这是最好的'解。没有使用边距/填充的任何其他方式来做它?
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
*{
border:none;
}
/* here starts my CSS */
.contact-us{
background-color:#FFB6C1;
clear:left;
text-align:center;
position:relative;
}
.contact-us form{
margin-top:20px;
font-family:'amiri';
border:none;
}
.contact-us form input{
margin-bottom:10px;
}
.contact-us h2{
font-family:'Pacifico',sans-serif;
font-size:30px;
text-align:center;
margin-top:20px;
}
input{
margin:0 auto;
}
input,label{
display:block;
}
label{
margin-right:25%;
}
input[type="text"]{
width:30%;
}
textarea{
width:30%;
height:80px;
}

<div class = "contact-us">
<div class = "inner-wrapper">
<h2> Contact </h2>
<form>
<section>
<label for ="name">Name</label>
<input type = "text" name = "name"><br>
<label for ="email">Email</label>
<input type ="text" name = "email"><br>
<label for ="message">Message</label>
<textarea name ="message">Enter text here...</textarea>
</section>
</form>
</div>
</div>
&#13;
答案 0 :(得分:1)
我这样做是将每个标签及其相应的输入字段放入div中。使标签和输入字段与div的左侧对齐;您现在需要做的就是编辑div以一致地移动标签和输入字段的位置。
为此,我创建了一个名为inputfielddiv
的div类(见下文)。只需调整inputfielddiv的左边距即可调整所有字段及其各自标签的位置。
希望这有帮助!如果您需要进一步澄清,请与我们联系。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
*{
border:none;
}
/* here starts my CSS */
.contact-us{
background-color:#FFB6C1;
clear:left;
text-align:center;
position:relative;
}
.contact-us form{
margin-top:20px;
font-family:'amiri';
border:none;
}
.contact-us form input{
margin-bottom:10px;
}
.contact-us h2{
font-family:'Pacifico',sans-serif;
font-size:30px;
text-align:center;
margin-top:20px;
}
input,label{
display:block;
}
input[type="text"]{
width:30%;
}
textarea{
width:30%;
height:80px;
display:block;
}
.inputfielddiv {
margin-left: 30%;
}
<div class = "contact-us">
<div class = "inner-wrapper">
<h2> Contact </h2>
<form>
<section>
<div class="inputfielddiv">
<label align="left" for ="name">Name</label>
<input align="left" type = "text" name = "name"><br>
</div>
<div class="inputfielddiv">
<label align="left" for ="email">Email</label>
<input align="left" type ="text" name = "email"><br>
</div>
<div class="inputfielddiv">
<label align="left" for ="message">Message</label>
<textarea align="left" name ="message">Enter text here...</textarea>
</div>
</section>
</form>
</div>
</div>
答案 1 :(得分:0)
我能想到的唯一可靠且最少hacky的方法是使用position
。我冒昧地修改了HTML。表单字段在标签内移动。它仍然有效的HTML。看看它是否适合你。
label{position:relative; display:inline-block;}
label span{position:absolute; top:0; left:0; font-size:14px; line-height:1;}
input,textarea{padding-top:14px;}
&#13;
<form>
<label><span>Name</span>
<input type="text" name="name">
</label>
<label><span>Email</span>
<input type="text" name="email">
</label>
<label><span>Message</span>
<textarea name ="message">Enter text here...</textarea>
</label>
</form>
&#13;