html - 引导内联元素

Question

所以在我的页面顶部我有一个标题和一个 Facebook 标志。这是一个工作示例：小提琴

因此，所有内容都在页面顶部整齐排列。但是，我希望徽标和文本Join us on...位于右侧，并且标题保持在原位。我试过添加class="pull-right"到第二个和第三个<li>元素，就像这样。但是你可以看到它是如何真正搞砸垂直对齐的。除了对齐之外，这就是我希望它的外观。

关于如何修复对齐的任何想法？

Answer 1

您可以在. li此外，H4 会导致中断，所以您应该将 img 和“加入我们...”放在 H4 中。

尝试这个：

<ul class="inline">
  <li><h3 class="muted">Heading</h3></li>
  <li class="pull-right">
    <div class="media">
      <h4 class="media-heading">
        <a href="#">
          <img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
        </a>    
        Join Us on Facebook
      </h4>
    </div>
  </li>
</ul>

Answer 2

你应该添加另一个元素并给它“pull-right”类。您的加入我们的代码应该在其中。

所以你应该有这样的;

<ul>
   logo
</ul>
<ul class="pull-right">
   join us
</ul>