/ / Text mit Spalten ausrichten - zurb-foundation

Text mit Spalten ausrichten - zurb-foundation

Ich möchte das Textfeld für die Telefonnummer im folgenden Format anzeigen (555) -555-5555. Immer wenn ich versuche, die Bindestriche oder Klammern hinzuzufügen, werden sie nicht korrekt ausgerichtet. Wie kann ich das erreichen?
Geige

Code:

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

Antworten:

0 für die Antwort № 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>

Ich denke, das ist richtig, vielleicht möchten Sie die Größe der Dinge ändern, aber es passt alles zusammen, wie ich denke, dass Sie danach sind.

So wie das dann?

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

Kann nicht helfen, aber ich denke, es sieht besser aus mit der Post und vor dem Update.