html - 尝试使用基础将 VCard 与名称文本字段对齐

Question

我想弄清楚如何将右侧的 Vcard 与名称文本字段对齐，但它似乎在我插入时在文本字段之间创建了一个间隙。我想毫无问题地将我的 Vcard 与文本字段对齐。

这是我的 HTML 代码:

<div id="contact">
<div  class="row">
<div class="panel">
<h5>Contact Us</h5>
<p class="">We would love to hear from you</p>
<form>
<div class="row">
  <div class="small-4 large-8 columns">
  <label>Name
    <input type="text" placeholder="Enter your name ..." />
  </label>
</div>
<div class="large-4 columns text-center">
<ul class="vcard">
<li class="fn">John T. Yeti</li>
<li class="nickname">Yeti</li>
<li class="org">Foundation, Inc.</li>
<li class="tel"><a href="tel:408-867-5309">408-867-5309</a></li>
<li><a class="url" href="http://foundation.zurb.com/">http://foundation.zurb.com/</a> 
 </li>
</ul>
</div>
</div>
<div class="row">
  <div class="small-4 large-8 columns">
  <label>Email
      <input type="text" placeholder="Enter your email..." />
    </label>
    </div>
   </div>
<div class="row">
    <div class="small-4 large-8 columns">
    <label>Message
    <input type="text" placeholder="Enter your message..." />
    </label>
    </div>
    </div>
    </div>
</div>

Answer 1

这是 CSS:

   .vcard{
float:right;
display:inline-block;
position:relative;
top: -50px;
}

http://jsbin.com/pazapeleqesi/1/edit