CSS菜单浮动半左半右
我想要一种方法让我的菜单浮动半左半。 因此，导航栏中间的徽标就像它一样浮动中心，然后一半菜单项位于菜单的左侧，另一半位于右侧。
这是我目前代码的工作目录： http ： //theaamgroup.com/david-programs/brandit/
基本上如果那不清楚我想在这里制作这个导航栏： 
看起来像这样：
HTML
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; } }
帮助我指向正确的方向将会很棒。 提前致谢！
我在firebug中摆弄你的菜单并从原始位置删除图像，并将其作为菜单中的新元素li：
Ans然后我调整了li的css调用，添加：
.navbar .nav > li { display: inline-block;
这应该让您在正确的轨道上完成您需要的样式。
另外，你可以删除float:left; 来自.nav因为它不需要position:relative;
制作带有2个li元素的2 ul元素。
- Home
- About>
- Contact
- Dropdown
将第1个放在徽标的左侧（之前），将第2个放在右侧（在>之后。浮动：需要左侧。