[英]Adding characters between input fields
我有一個簡單的表單,其中包含兩列和一個包含三個輸入的字段(請參見下圖) 兩列都向右浮動。 我需要在“Adószám”中的字段之間添加破折號。 我用:before偽類嘗試過,但是沒有顯示任何東西。 如果僅將其添加到HTML標記中,則字段將換行到下一行。
這是我的HTML:
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" />
<input type="text" id="taxno2" name="taxno2" />
<input type="text" id="taxno3" name="taxno3" />
</label>
而我的CSS:
#column1 {
margin-right: 50px;
display: inline-block;
width: 270px;
float: left;
}
#column2 {
display: inline-block;
width: 270px;
float: left;
}
label {
font-weight: bold;
/*display: inline-block;*/
}
input {
width: 255px;
/*display: inline-block;*/
height: 28px;
border: 1px solid #c3c6d1;
background-color: #eaecf2;
margin: 5px 0 5px 0;
font-size: 15px;
padding: 5px;
}
#taxno1 {
width: 82px;
}
#taxno2, #taxno3 {
width: 46px;
margin-left: 23px;
}
請查看此代碼
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" /> -
<input type="text" id="taxno2" name="taxno2" /> -
<input type="text" id="taxno3" name="taxno3" />
</label>
#taxno2, #taxno3 {
width: 46px;
margin-left: 10px;
}
您必須將input
包裝在一個span
,然后提供一個類來使span
元素起作用。
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<span class="add"><input type="text" id="taxno1" name="taxno1" /></span>
<span class="add"><input type="text" id="taxno2" name="taxno2" /></span>
<span class="add"><input type="text" id="taxno3" name="taxno3" /></span>
</label>
</div>
並在您的CSS文件中添加此類。
.add:after
{
content: "/";
}
.add:last-child:after{
content: " ";
}
一個有效的演示鏈接在這里。.http://jsbin.com/qeduhogi/3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.