将文本与列对齐

Question

我想以下列格式显示电话号码的文本框     （555）-555-5555。     每当我尝试添加破折号或括号时，它们都没有正确对齐。     我怎样才能做到这一点？
Fiddle

代码：

<div class="row">
<div class="large-2 columns">
    <label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
    <span>(</span>
    <input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
    <span>)</span> -
</div>
<div class="large-3 columns">
    <input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
    <input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>

Answer 1

 <div class="row"> 
    <div class="large-2 columns">
        <label class="inline right">* Phone:</label>
    </div>
    <div class="large-6 columns">
        <div class="row collapse">
            <div class="large-3 columns">
                <span class="prefix"> ( </span>
            </div>
            <div class="large-6 columns">
                <input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
            </div>
            <div class="large-3 columns">
                <span class="postfix"> ) - </span>
            </div>
        </div>
    </div>
    <div class="large-2 columns">
        <input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
    </div>
    <div class="large-2 columns end">
        <input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
    </div>
 </div>

我认为这是对的，你可能想要改变事物的大小，但这一切都符合我认为你的方式。

修改

那么呢？

<div class="row"> 
<div class="large-3 columns">
    <label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
    <div class="row collapse">
        <div class="large-1 columns">
            <p class="">(</p>
        </div>
        <div class="large-10 columns">
            <input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
        </div>
        <div class="large-1 columns">
            <p class="">)-</p>  
        </div>
    </div>
</div>
<div class="large-3 columns">
    <input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
    <input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
</div>

不过可以提供帮助，但认为通过帖子和预修复看起来效果会更好。