导航中的图像定位

Question

我正在努力寻找如何定位已添加到导航下方的社交媒体图标的艰难时期。 如何在不移动链接的情况下将图像平放在导航右侧，并将其推到底部一点？

这是它现在的外观图片： http : //i48.tinypic.com/34shzc3.png

下面是布局，

HTML：

          <!-- HEADER -->
      <div id="header">

        <div id="site_nav">
          <virb load="nav" />
<a href="http://www.facebook.com/"><img src="http://i47.tinypic.com/2hsawr8.png" /></a>
<a href="http://www.facebook.com/"><img src="http://i47.tinypic.com/2hsawr8.png" /></a>
        </div>

        <div class="module" id="display_name">
          <h1><a href="get[site.url]"><virb customize="logo" /></a></h1>
          <h2 id="virb_customize_tagline"><virb customize="tagline" /></h2>
        </div> 

      </div>
      <!-- END HEADER -->

CSS：

/* ---------- HEADER ---------- */

div#header_wrapper {
    width:100%;
    background: <virb get="customize.colors.background_header" />;
    z-index: 2;
}

div#header {
    width:960px;
    margin:0 auto;
    padding:35px 0 20px;
}
    #header h1 {
        font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />;
        line-height: 100%;
    }

        #header h1 a,
        #header h1 a:hover {
            color: <virb get="customize.colors.site_name" />;
        }

        #header h1 img {
            display: block;
            max-width: 300px;
        }

    #header h2 {
        font-weight: bold;
        font-size: <virb get="customize.fonts.tagline_size" />;
        font-family: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.tagline" />;
        line-height: 110%;
        padding-top: 6px;
    }

    #header #page_title {
       float:left;
    }
    #header #site_nav {
       float:right;
       margin-top: 54px;
    }

#display_name {width: 300px;}

    #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;}


/* ---------- NAVIGATION ---------- */

div#site_nav {
    display: block;
    max-width: 700px;
}

#site_nav ul li {
    display: inline;
    position: relative;
    font-size: <virb get="customize.fonts.nav_size" />;
    font-family: <virb get="customize.fonts.header_family" />;
    font-weight: bold;
    letter-spacing: .2px;
    text-transform: uppercase;
}

#site_nav div.clear {
    display: none;
}

    #site_nav li.section:after { content: " "; }

    #site_nav li.section ul { display: none; } 
    #site_nav li.section:hover ul { display: block; }
    #site_nav li.section ul {
        position: absolute;
        top: <virb get="customize.fonts.nav_size" />;
        left: 10px;
        width: 200px;
        z-index: 111;
        padding-top: 10px;
    }
        #site_nav li.section ul li {
            float: none;
            display: block;
            font: normal <virb get="customize.fonts.nav_size" />;
            background: <virb get="customize.colors.nav_dropdown" />;
            margin: 0;
            padding: 7px 7px 5px 7px;
            letter-spacing: 0;
            text-align: left;
            line-height: 1.5;
            border-bottom: 1px solid <virb get="customize.colors.background_header" />;
        }
            #site_nav li.section ul li:last-child {border-bottom: none;}

            #site_nav li.section ul li a {
                text-transform: none;
                letter-spacing: 0;
                padding: 4px 7px 4px 3px;
                font: <virb get="customize.fonts.header_family" />;
                display: block;
            }

    #site_nav ul li a, 
    #site_nav ul li.section {
        cursor: pointer;
        padding: 0 12px;
        font: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.nav_link" />;
    }
    #site_nav ul li a:hover,
    #site_nav ul li.section:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }
    #site_nav ul li.active, #site_nav ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li a {
        color: <virb get="customize.colors.nav_link" />;
    }

    #site_nav ul li.active ul li a:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
        cursor: default;
    }

Answer 1

将以下css添加到facebook图像的周围锚标记：

.fr
{
    float:right;
}

像这样：

<a href='some-url' class='fr'><img src='facebook'/></a>