0

我很难弄清楚如何定位我在导航下方添加的社交媒体图标。如何在不移动链接的情况下将图像定位在导航右侧并将其稍微推到底部？

这是它现在的样子：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;
    }
4

1 回答 1

1

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

.fr
{
    float:right;
}

像这样：

<a href='some-url' class='fr'><img src='facebook'/></a>
于 2012-09-06T22:11:19.773 回答