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

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

1 个答案: