Question

我正试图保持对齐标签，保持输入字段右对齐而不成功！我能够对齐标签或输入字段，但不能同时对齐它们！我尝试了很多东西，但没有任何效果

HTML：

    <body style="background-color:lightgray;">   
    <center> <div class="form-style-2">
<div class="form-style-2-heading">Info</div>
<form action="" method="POST">
<label for="cod"><span>Cod <span class="required">*</span></span><input type="text" class="input-field" name="cod" value="" /></label>
<label for="name" ><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="name" value="" /></label>
<label for="phone"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="phone" value="" /></label>
<label for="address"><span>Address <span class="required">*</span></span><input type="text" class="input-field" name="address" value="" /></label>
<label><span>&nbsp;</span><input type="submit" value="Submit" /></label>
</form></center>
</div>   
    </body>

CSS

.form-style-2{
    max-width: 500px;
    padding: 20px 12px 10px 20px;
    font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display: block;
    margin: 0px 0px 15px 0px;
}
.form-style-2 label > span{
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}
.form-style-2 span.required{
    color:red;
}
.form-style-2 input.input-field{
    width: 48%;  
}

.form-style-2 input.input-field,
.form-style-2 .textarea-field{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .textarea-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 .textarea-field{
    height:100px;
    width: 55%;
}
.form-style-2 input[type=submit],
.form-style-2 input[type=button]{
    border: none;
    padding: 8px 15px 8px 15px;
    background: #4CAF50;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    -moz-box-shadow: 1px 1px 4px #DADADA;
    -webkit-box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover{
    background: #EA7B00;
    color: #fff;
}

jfiddle：https://jsfiddle.net/uv21fc5o/

Answer 1

您不想使用<center>标记。尝试使用auto边距，就像我在这里所做的那样：

https://jsfiddle.net/uv21fc5o/1/

.form-style-2{
    max-width: 500px;
    padding: 20px 12px 10px 20px;
    font: 13px Arial, Helvetica, sans-serif;
    margin: 0 auto;
}

Answer 2

将左边的文字对齐：

<强> CSS

.form-style-2 label > span {
    text-align: left;
}

HTML - 如何左对齐标签？

2 个答案: