【问题标题】:How to align an image and a navbar inside a container?如何对齐容器内的图像和导航栏?
【发布时间】:2013-10-30 09:01:14
【问题描述】:

我无法对齐容器 div 内的徽标和导航栏。导航栏始终位于图像徽标的下方。我尝试了一些 html align 属性,但没有解决问题。我正在使用引导 CSS,所以我应该在其中更改一些内容吗?

<header>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">

            <!--company logo and slogan-->
            <img src="img/logo.png" alt="logo" />

            <!--button for responsive navigation-->
            ...

            <!--Nav bar-->
            <div class="nav-collapse collapse">        
              <ul class="nav pull-right" >
                ...
              </ul>
                            </div>

        </div>
    </div>
</div>

【问题讨论】:

  • 您是否尝试过使用floats?也许有图片float:left;

标签: html css twitter-bootstrap alignment


【解决方案1】:

您可以尝试将 img 和 div 标签向左浮动,如下所示:

<header>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container" style="overflow: auto; ">

                <!--company logo and slogan-->
                <img src="img/logo.png" style="float: left; " alt="logo" />

                <!--Nav bar-->
                <div class="nav-collapse collapse" style="float: left; ">        
                  <ul class="nav pull-right" >
                    ...
                  </ul>
                </div>
            </div>
        </div>
    </div>
</header>

这应该使它们显示在同一级别。

【讨论】:

  • overflow: auto 应用于容器,因为它只包含未清除的浮动元素。 overflow: visible 以外的任何内容都将确保您的包含元素在计算其尺寸时考虑其浮动元素。
猜你喜欢
  • 2014-03-25
  • 1970-01-01
  • 1970-01-01
  • 2022-07-15
  • 2016-05-20
  • 2014-09-20
  • 2019-01-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多