难以对齐 HTML 标题元素

Question

我正在尝试将 Twitter 徽标添加到我的标题（我使用 Bootstrap CSS），但它搞砸了对齐方式。我试图将它们并排放置，但它却将它们推到了下面。这是我的第一次尝试：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand csh-top-link" href="index.html">Cardshifter</a>

    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
          <li><img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;"><a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.2em; margin-top: 2px;">@Cardshifter</a></li>
      </ul>
    </div><!--/.nav-collapse -->
</nav>

这是它的渲染方式：

这是我第二次尝试使用<div> 而不是<ul>：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand csh-top-link" href="index.html">Cardshifter</a>          
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <div class="nav navbar-nav">
        <img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">
      </div>
      <div>
        <a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.2em; margin-top: 2px;">@Cardshifter</a></li>
      </div>
    </div><!--/.nav-collapse -->
</nav>

这似乎是一个小小的改进，因为它们是独立的元素（请注意，右侧的浅蓝色轮廓仅出现在我的 Brackets 实时预览中，而不是实际再现中）：

我在<ul> 和<div> 版本上修改了CSS margin 和padding，但没有明显改进。 如果您希望在上下文中查看代码，它目前托管在 Github 上，直到找到解决方案。所需的布局是并排的：

[Cardshifter] | [Twitter logo] | [@Cardshifter]

Answer 1

您可以将列表项与...列表进行简单对齐！

HTML：

<ul class="navbar">
    <li>
        Twitter logo here
    </li>
    <li>
        Twitter handle here
    </li>
</ul>

CSS：

.navbar {
    /* Just a little housekeeping … */
    list-style: none;
    margin: 0;
}

.navbar > li {
    display: inline-block;
}

Answer 2

@kleinfreund 得到了正确的解决方案，但是作为对问题的评论指出了一个错误，它（与接受的答案相结合）完全解决了问题：

正确答案如下，内联百分比也是怎么回事 图像上的宽度？那里发生了很多糟糕的事情。转储 内联样式，不要在位图图像上使用百分比宽度，使用 确切的像素大小并使用 HTML 高度和宽度属性。 – 马特·兰伯特 3 小时前

所以我把代码改成了这样，它完全可以工作：

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="csh-twitter nav navbar-nav">
          <li>
              <img src="images/logos/Twitter_logo_blue.png" style="height: 25px; width: 30px; margin-top: 10px;">
          </li>
          <li>
              <a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.4em; margin-top: 2px;">@Cardshifter</a>
          </li>
      </ul>
    </div><!--/.nav-collapse -->

渲染：