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>

这是它呈现的方式：

cs-align1

这是我第二次尝试使用<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实时预览中，而不是实际的再现中）：

cs-align2

我在margin和padding版本上对CSS <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;
}

Answer 2

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

正确的答案在下面，也就是内联百分比图像上的宽度？那里发生了很多不好的事情。转储内联样式，请勿在位图图像上使用百分比作为宽度，请使用确切的像素大小并使用HTML高度和宽度属性。 - Matt Lambert 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 -->

渲染：

cs-align5

难以对齐HTML标题元素

2 个答案: