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

這是因爲他們都在裏面''

標籤，它正在調整文成中心。有一件事你可以刪除它，並添加'margin：auto'來只居中我們的形式[像這樣]（https://jsfiddle.net/uv21fc5o/2/） –

對齊文本留像這樣：

CSS

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

來源

2017-04-07 17:35:41 StefanBob

以這種方式它與中心標籤，謝謝伴侶！：D – Nicola

不客氣:)如果你是冠軍，標記我的正確答案，dana不需要積分; 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

它的工作！感謝：D – Nicola

html - 如何左對齊標籤？

回答

相關問題