html - ラベルを左揃えにする方法

私は、入力フィールドを正しく整列させずに右揃えにして、ラベルを左揃えにしようとしています！ラベルや入力フィールドを整列できましたが、両方を整列することはできませんでした。私は多くのことを試してみたが、何も働いていないhtml - ラベルを左揃えにする方法

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/

出典

2017-04-07 Nicola

。あなたができることの1つは、それを取り除き、私たちのフォーム[like so]（https://jsfiddle.net/uv21fc5o/2/）のみをcenteringするためにmargin：autoを追加することです。 –

テキストを揃えはそうのように左：

をCSS

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

出典

2017-04-07 17:35:41 StefanBob

このようにして、centerタグメイト！：D – Nicola

あなたは大歓迎です。あなたがチャンピオンであれば正解をマークし、ダナはポイントを必要としません; P – StefanBob

@Nicolaあなたは '

'を使用すべきではありません。 ]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center） – zgood

<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; 
}

出典

2017-04-07 17:36:22 dana

それは働いた！ありがとう – Nicola

html - ラベルを左揃えにする方法

答えて

関連する問題