在输入字段之间添加字符答案

【问题标题】：Adding characters between input fields在输入字段之间添加字符
【发布时间】：2014-03-12 07:38:21
【问题描述】：

我有一个包含两列和一个包含三个输入的字段的简单表单（见附图）两列向右浮动。我需要在“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;
}

【问题讨论】：

stackoverflow.com/a/3538529/2600397

标签： html css forms

【解决方案1】：

请查看此代码

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

在这里演示http://jsfiddle.net/z9b5S/

【讨论】：

是的，我试过了，但我需要在每个系统上保持 3 个输入字段的总宽度（与上面更宽的输入对齐）。破折号的宽度可能因操作系统和浏览器而异

【解决方案2】：

您必须将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/

【讨论】：