难以对齐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实时预览中,而不是实际的再现):

我曾与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;
}