html - wie links Etiketten ausrichten?

Ich versuche, die Etiketten linksbündig auszurichten, damit die Eingabefelder ohne Erfolg rechtsbündig bleiben! Ich konnte Labels oder Eingabefelder ausrichten, aber nicht beide! Ich habe eine Menge Dinge ausprobiert, aber nichts funktioniertehtml - wie links Etiketten ausrichten?

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/

Quelle

2017-04-07 Nicola

Das ist, weil sie im Inneren sind ''

-Tag, das den Text in der Mitte ausrichtet. Eine Sache, die Sie tun können, ist das entfernen und fügen Sie 'margin: auto' zu zentrieren nur die unsere Form [wie so] (https://jsfiddle.net/uv21fc5o/2/) –

den Text wie so links ausrichten:

CSS

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

Quelle

2017-04-07 17:35:41 StefanBob

Auf diese Weise funktioniert es mit Center-Tag, danke Kamerad! : D – Nicola

Gern geschehen :) Markieren Sie meine als richtige Antwort, wenn Sie ein Champion sind, braucht Dana die Punkte nicht, P – StefanBob

@Nicola Sie sollten nicht die '

' verwenden, es ist veraltet (siehe [hier ] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)) – zgood

Sie möchten das <center>-Tag nicht verwenden. Versuchen Sie es mit auto Margen, wie ich hier getan habe:

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

Quelle

2017-04-07 17:36:22 dana

Es hat funktioniert! Danke: D – Nicola

html - wie links Etiketten ausrichten?

Antwort

Verwandte Themen