将导航栏浮动到图像的两侧答案

【问题标题】：Float navigation bar to sides of image将导航栏浮动到图像的两侧
【发布时间】：2014-02-24 23:14:56
【问题描述】：

我有一个导航栏，其中心有一个徽标。有6个按钮，左边3个，右边3个。我想要做的是让按钮留在图像旁边，而不是在页面的最左边和最右边。这是导航栏的代码。

  <img src="Pictures/ThaXGamingWaterMark.png" alt="Tha xGaming Clan" height="200" width="200">
   </div>
    <div class="navigationwide" bgcolor="#f1f1f1">
        <div align="center" bgcolor="#f1f1f1">
            <ul class="menu">
                <li class="home"><a href="#">Home</a>
                </li>
                <li class="about"><a href="#">About</a>
                </li>
                <li class="clanmembers"><a href="#">Clan Members</a>
                </li>
            </ul>
            <ul class="menu2">
                <li class="forum"><a href="#">Forum</a>
                </li>
                <li class="contact"><a href="#">Contact</a>
                </li>
                <li class="youtube"><a href="#">YouTube</a>
                </li>
            </ul>
        </div>
    </div>

CSS 代码：

#
navigationwide {
    overflow: hidden;
    width: 100 % ;
    height: 42px;
    display: block;
    clear: both;
    border - top: 1px solid# C1CBD5;
    border - bottom: 1px solid# D5DBE1;
    background: -moz - linear - gradient(center bottom, #EFEFEF 9 % , #EFEFEF 50 % , #EFEFEF 98 % ) repeat scroll 0 % 0 % transparent;
}

.navtable {
    overflow: hidden;
    background: #f1f1f1 repeat scroll 0 0 red;
    margin: 0;
    padding: 0;
    left: 0;
    position: absolute;
    right: 0;
}
    .menu {
        position: static;
        margin - left: 100px;
        padding: 0;
        display: inline - block;
        list - style - type: none;
        background: #f1f1f1;
        float: left;
}
    .menu li {
        overflow: hidden;
        padding: 0;
        margin: 0;
        height: 32px;
        margin - right: 1em;
        list - style: none;
        background - repeat: no - repeat;
}
    .menu li a, .menu li a: visited {
        overflow: hidden;
        display: block;
        text - decoration: none;
        text - indent: -9999px;
        height: 32px;
        background - repeat: no - repeat;
}

.menu2 {
    position: static;
    margin - right: 100px;
    padding: 0;
    display: inline - block;
    list - style - type: none;
    background: #f1f1f1;
    float: right;
}
    .menu2 li {
        padding: 0;
        margin: 0;
        height: 32px;
        margin - right: 1em;
        list - style: none;
        background - repeat: no - repeat;
}
    .menu2 li a,
.menu li a: visited {
    display: block;
    text - decoration: none;
    text - indent: -9999px;
    height: 32px;
    background - repeat: no - repeat;
}

.home {
    background - image: url(Pictures / HomeButtonNavHover.png);
    width: 124px;
}
    .home a {
        background - image: url(Pictures / HomeButtonNav.png);
}

.about {
    background - image: url(Pictures / AboutNavHover.png);
    width: 124px;
}
    .about a {
        background - image: url(Pictures / AboutNav.png);
}

.clanmembers {
    background - image: url(Pictures / ClanMembersNavHover.png);
    width: 124px;
}
    .clanmembers a {
        background - image: url(Pictures / ClanMembersNav.png);
}

.forum {
    background - image: url(Pictures / ForumNavHover.png);
    width: 124px;
}
    .forum a {
        background - image: url(Pictures / ForumNav.png);
}

.contact {
    background - image: url(Pictures / ContactNavHover.png);
    width: 124px;
}
    .contact a {
        background - image: url(Pictures / ContactNav.png);
}

.youtube {
    background - image: url(Pictures / YouTubeNavHover.png);
    width: 124px;
}
    .youtube a {
        background - image: url(Pictures / YouTubeNav.png);
}
ul.menu li a: hover {
    background: none;
}
ul.menu2 li a: hover {
    background: none;
}
    .menu li {
        float: left;
}
    .menu: after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
    .menu2 li {
        float: right;
}
    .menu2: after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

#
headerwide {
    position: relative;
    height: 125px;
    width: 100 % ;
    display: block;
    background: -moz - linear - gradient(center top, #036, # 25609C) repeat scroll 0 % 0 % transparent;
    clear: both;
    border - bottom: 1px solid #012251;
    border-top: 1px solid # 356FA9;
}

#
logo img {
    position: absolute;
    z - index: 2147483647;
    left: 50 % ;
    margin - left: -100px;
    text - align: center;
    top: 9px;
    float: inherit;
}

【问题讨论】：

请粘贴您的小提琴链接
你只想让图片在最左边，菜单在右边，menu2在最右边，是这样吗？
首先你为什么要在你的css中添加空格？？边距 - 左：100px；应该是 maring-left: 100px 与你的所有背景图像和内联块相同，在你修复后创建一个 jsfiddle
我添加了 JSFiddle。 jsfiddle.net/gx2vN/10

标签： html css navigation navbar

【解决方案1】：

这是您要实现的目标的示例添加一个容器，然后用 menu-left 和 menu-right 分开

并指定定位

.menu-left, .menu-right {
    width: 300px;
    height: 64px;
    position: absolute;
    top: 0;
}

.menu-left {
    left: 150px;
}

.menu-right {
    right: 150px;
}

然后在徽标容器上告诉它左：50% 居中

http://jsfiddle.net/L2VrN/83/

【讨论】：