Question

我很难让徽标图像（红色）溢出菜单栏，目前添加徽标后菜单栏会延长（见图片）。

HTML代码：

<div id="page" class="page">

    <div class="pixfort_normal_1" id="section_header_2_dark">
    <div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;">
        <div class="container">              
            <div class="sixteen columns firas2">
                <nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1">                 
                    <div class="containerss">
                        <div class="navbar-header">
                            <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button">
                                <span class="sr-only ">Toggle navigation</span>
                            </button>
                            <img src="images/LOGO1.png" class="pix_nav_logo">              
                        </div>

                        <div id="navbar-collapse-02" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active propClone"><a href="#">Home</a></li>
                                <li class="propClone"><a href="#">About</a></li>
                                <li class="propClone"><a href="#">Workshops and Training</a></li>
                                <li class="propClone"><a href="#">Contact</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->

                    </div><!-- /.container -->
                </nav>
            </div>
        </div><!-- container -->
    </div>
</div>

CSS代码：

.pix_nav_1 ul li a {
color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
};
.pix_nav_1 ul li a:hover {
//color: rgba(0,0,0,0.85); 
opacity: 0.6;
}
.header_nav_1 {
padding: 0px !important;
box-shadow: none; 
}
.pix_nav_logo {
background: url(../images/t_logo.png) no-repeat;
padding-top: 0px;
overflow: visible;
}
.navbar-center {margin-left: auto;margin-right: auto;float: none;position: 
relative;text-align: center; }
.navbar-center li { text-align: center;float: none;display: inline-block;}

有人可以帮助我如何让徽标溢出菜单。提前谢谢！

Answer 1

试试这个

.pix_nav_logo { 
  position: absolute;
}

您可以通过为.pix_nav_logo左右播放css属性的不同值来调整徽标。

Answer 2

position: absolute：元素相对于其第一个定位（非静态）祖先元素定位。

.pix_nav_logo {
  background: url(../images/t_logo.png) no-repeat;
  padding-top: 0px;
  overflow: visible;
  width: 100px; // This for your logo size
  position: absolute; // This is absolute position of logo
}

.pix_nav_1 ul li a {
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

;
.pix_nav_1 ul li a:hover {
  //color: rgba(0,0,0,0.85); 
  opacity: 0.6;
}

.header_nav_1 {
  padding: 0px !important;
  box-shadow: none;
}

.pix_nav_logo {
  background: url(../images/t_logo.png) no-repeat;
  padding-top: 0px;
  overflow: visible;
  width: 100px;
  position: absolute;
}

.navbar-center {
  margin-left: auto;
  margin-right: auto;
  float: none;
  position: relative;
  text-align: center;
}

.navbar-center li {
  text-align: center;
  float: none;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




<div id="page" class="page">

  <div class="pixfort_normal_1" id="section_header_2_dark">
    <div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;">
      <div class="container">
        <div class="sixteen columns firas2">
          <nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1">
            <div class="containerss">
              <div class="navbar-header">
                <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button">
                                <span class="sr-only ">Toggle navigation</span>
                            </button>
                <img src="http://www.hjmt.com/blog/wp-content/uploads/2012/08/Logo_TV_2015.png" class="pix_nav_logo">
              </div>

              <div id="navbar-collapse-02" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class="active propClone"><a href="#">Home</a></li>
                  <li class="propClone"><a href="#">About</a></li>
                  <li class="propClone"><a href="#">Workshops and Training</a></li>
                  <li class="propClone"><a href="#">Contact</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->

            </div>
            <!-- /.container -->
          </nav>
        </div>
      </div>
      <!-- container -->
    </div>
  </div>

徽标图片溢出菜单栏

2 个答案: