Diyelim ki 10 giriş alanım var ve sol taraftaki giriş alanlarından önce, kullanıcının alana girmesi gerekenleri belirtmek için metni tutan bir span etiketi var. Bazı şeyler yaptım ama metnin ne kadar büyük olduğuna bakılmaksızın span etiketi ve giriş alanı arasında nasıl boşluk ekleyeceğinden emin değilim. Bunun gibiMetin uzunluğundan bağımsız olarak etiketle giriş alanı arasında nasıl eşit aralık eklerim?
:
Kullanım label yerine span. Girişlerle eşleştirilmesi ve bazı ek işlevlerin saklanması anlamına gelir (tıklatıldığında etiket, girişe odaklanır).
Bu olabilir ne istediğinizi tam olarak be:
HTML:
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
CSS:
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
Teşekkürler. Örneğinizde, ad ve değer özniteliğindeki değere eşit değer etiketi var. Ben biraz yeni, bu yüzden etiketinde olması gereken değeri bilmek istedim? İsim alanındaki veya değer alanındaki değer? Ya da herhangi bir şey olabilir mi? – starbucks
Herhangi bir etiket özelliği/içeriği istediğiniz her şey olabilir. Eşleşmesi gereken tek şey, formun mantığını almak için etiketin 'for' özniteliği ve girdinin id id özniteliğidir. Her girişin adı ve id'si aynı olmak zorunda değildir, ancak formunuzu gözden geçirirken daha fazla kafa karışıklığını önlemek için önerilen iyi bir uygulamadır. Umarım yardımcı olur :) –
Ayrıca, erişilebilirlik nedenlerinden dolayı, etiketin bu girişle ilişkilendirildiği şekilde, girişe odaklanmak için etikete tıklayabilirsiniz. –
Ayrıca kodunun altına kullanılan olabilir
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Etiket için '' kullanmayın, semantik olarak doğru yolu, '
Bir masa
<table class="formcontrols" >
<tr>
<td>
<label for="Test">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="Test" name="Test" value="John">
</td>
</tr>
<tr>
<td>
<label for="Test">Last name:</label>
</td>
<td style="padding-left:10px;">
<input id="lastName" name="lastName" value="Travolta">
</td>
</tr>
</table>
kullanabilirsiniz sonucu olacaktır: Bu yepyeni CSS display: grid (browser support) kullanılarak gerçekleştirilebilir ImageResult
HTML:
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Css ızgarası kullanıldığında, varsayılan olarak, öğeler sütun tarafından sütuna sonra satır satır sıralanır. grid-template-columns kuralı, toplam yatay alanın 1/4'ünü ve diğeri de yatay alanın 3/4'ünü kaplayan iki ızgara sütun oluşturur. Bu istenen etkiyi yaratır.
Hep etiketin içinde 'ön' etiketini kullanın ve sadece içinde boş alanlar girin Böylece her zaman size alanların aynı veya farklı sayıda gerektirir ekleyebilirler http:
<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of
spaces</pre>
<input type="text"></label>
</form>
Umut sen benim cevabını, o JSFiddle üzerinde bazı örnek basit ve etkili kesmek İşte
oluyor var // js fiddle.net/qAhQf/ – starbucks
Her şeyden önce, span 'yerine 'label' kullanın. Girişlerle eşleştirilmesi ve bazı ek işlevlerin saklanması anlamına gelir (tıklatıldığında etiket, girişe odaklanır). Neyse. Tam olarak "yayılma etiketi ve girdi arasında nasıl eklenir?" Ile ne demek istiyorsunuz? Ne tür şeyler? Tüm etiketlerin içerikten bağımsız olarak aynı genişliğe sahip olmasını istediğiniz anlamına mı geliyor? –
Yanlış kelime için üzgünüm, hatta yer demekti. – starbucks