CSS菜单浮动一半左和一半右 [英] CSS Menu float half left and half right
本文介绍了CSS菜单浮动一半左和一半右的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一个方法来浮动我的菜单左半和右半。这样，导航栏中间的标志就像是浮动中心，然后菜单项的一半在菜单的左侧，另一半在右侧。
Im wanting a way to float my menu half left and half right. So that the logo in the middle of the nav bar is floated center like it is and then half the menu items are on the left of the menu and the other half are on the right side.
这是我目前代码的工作目录： http：// theaamgroup。 com / david-programs / brandit /
This is my working directory for the code at the moment: http://theaamgroup.com/david-programs/brandit/
基本上，如果这不清楚我想在这里导航栏：
Basicly if thats not clear im wanting to make this nav bar here:
看起来像这样：
>
HTML
<!-- Carousel
================================================== -->
<div id="Carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="lib/img/carousel/slide-01.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-02.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-03.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<img src="lib/img/logos/Brandit_Logo.png" width="303" height="228" alt="Logos" class="MainLogo"/>
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"></a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
CSS
/* GLOBAL STYLES
-------------------------------------------------- */
body { padding-bottom: 40px; -webkit-text-size-adjust: none; -webkit-appearance: none; font-family: sans-serif; min-height: 416px; background-image: url('../img/bkg.png'); background-repeat: repeat; }
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; z-index: 5; margin-top: -85px; width: 100% }
.navbar-wrapper .navbar { }
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Downsize the brand/project name a bit */
.navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.navbar .nav > li > a { padding: 15px 20px }
/* Offset the responsive button for proper vertical alignment */
.MainLogo { position: absolute; left: 50%; right: 0; margin-top: -90px; margin-left: -152px; }
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 60px }
.carousel .container { position: relative; z-index: 10; }
.carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; }
.carousel .item { height: 500px }
.carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; }
.carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; }
.carousel-caption h1,
.carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.carousel-caption .btn { margin-top: 10px }
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper { margin-bottom: 0; width: auto; }
.navbar-wrapper { height: 50px; margin-top: -60px; }
.navbar-inner { margin: -20px 0; }
.navbar .nav > li { z-index: 0; }
.MainLogo { margin-top: -115px; }
.carousel .item { height: 500px }
.carousel img { width: auto; height: 500px; }
.marketing { margin-top: 30px; }
.featurette { height: auto; padding: 0; }
.featurette-image.pull-left,
.featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; }
}
@media (max-width: 767px) {
.navbar-inner { border-radius: 0; }
.btn-navbar { position: absolute; left: 85%; z-index: 5; }
.MainLogo { margin-top: -185px; }
.carousel .container { }
.carousel .item { height: 300px }
.carousel img { height: 300px }
.carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; }
.carousel-caption h1 { font-size: 30px }
.carousel-caption .lead,
.carousel-caption .btn { font-size: 18px }
.marketing .span4 + .span4 { margin-top: 40px }
.featurette-heading { font-size: 30px }
.featurette .lead { font-size: 18px; line-height: 1.5; }
}
有点帮助指向正确的方向将是巨大的。提前感谢！
A little help to point me in the right direction would be great. Thanks in advance!
推荐答案
我在firebug中使用您的菜单，并将图片从原始位置移除，并将其放置为您的菜单中的新元素li：
I fiddled with your menu in firebug and removed the image from it's original location, and placed it as a new element within your menu li:
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><img width="303" height="228" src="lib/img/logos/Brandit_Logo.png" alt="Logos" class="MainLogo"></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
...
然后我调整css调用 li ，添加：
Ans then I adjusted the css call for the li, adding in:
.navbar .nav > li {
display: inline-block;
这样应该可以根据需要在正确的轨道上完成样式。
This should set you on the right track to finish the styling as you need.
此外，您可以从 .nav float：left; >，因为 position：relative;
In addition, you can remove the float:left; from the .nav as it isn't needed with the position:relative;
这篇关于CSS菜单浮动一半左和一半右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
