css - 难以对齐 HTML header 元素

Question

我正在尝试将 Twitter Logo 添加到我的页眉(我使用 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 实时预览中，而不出现在实际再现中):

我修改了 CSS margin和 padding在 <ul> 上和 <div>没有明显改进的版本。 如果您希望在上下文中查看代码，它目前托管在 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;
}