-1

我一直在尝试将我的社交按钮（facebook // twitter）与我的标题和导航的其余部分对齐。我把头撞在墙上，似乎找不到让一切都对齐的解决方案。希望一些新鲜的眼睛可能会有所帮助。我在这里创建了当前代码的 jsFiddle：http: //jsfiddle.net/yZ4sm/我似乎无法排列的社交按钮是右侧的两个损坏的图像（在 jsFiddle 中）。

我希望最终结果看起来像这样

在下面查看我的 HTML 和 CSS：

HTML

<div id="headerWrapper">

    <div id="headerContent">

        <div id="grappleAnchor">
            <a href="index.html"> <img id="grappleAnchorLogo" src="img/grapple-logo.png" alt=" "> </a>
        </div>


        <div id="navigation">
            <div class="navigationLink">
                <a class="activeLink" href="index.html">Home</a>
                <div id="navigationMarker">
                </div>
            </div>        
            <div class="navigationLink">
                <a href="services.html">Services</a>
            </div>
            <div class="navigationLink">
                <a href="#">About</a>
            </div>
            <div class="navigationLink">
                <a href="#">Blog</a>
            </div>
            <div class="navigationLink">
                <a href="#">Contact</a>
            </div>
        </div>

        <div id="social">

            <div id="facebook">
                <a href="http://www.facebook.com/GrappleConsulting" target="_blank"> <img class="greydout" src="icons/facebook.png" alt=" "> </a>
            </div>

            <div id="twitter">
                <a href="http://twitter.com/blair_gorrell" target="_blank"> <img class="greydout" src="icons/twitter_bird.png" alt=" "> </a>
            </div>
        </div>

    </div>​

CSS

#headerWrapper {
    background-color: #e6e4e4;
    height:5em;
}

#headerContent {
    height:80px;

    margin: 0 auto; /*top, right, bottom, left*/
    padding: 0px 0; /*top&bottom, left&right */
    width: 955px;
}


/*---------->Logo Start<----------*/

    #grappleAnchor {

        clear:none;
        float:left;
        margin: 0;
        padding: 0;
    }

    #grappleAnchor a {
        display: block;
        float:left;
        text-decoration: none;
    }

    #grappleAnchorLogo {
        height: 70px;
    }

    #grappleAnchor a img {
        border: none;
    }

/*---------->Logo End<----------*/


/*---------->Navigation Start<----------*/

#navigation {
    line-height: 5em;
}

#navigation a:hover, #navigation a:active, #navigation a.activeLink {
    color: #FFF;
}

#navigation a {
    color:#000;
    margin: 0 1em 0 1em; /*top, right, bottom, left*/
    text-decoration: none;
}

div.navigationLink {
    float:left;
    font-size: 1.4em;
}

#navigationMarker{
    border-bottom: #FFF solid 0.8em;
    border-top: none;
    border-left: transparent solid 0.8em;
    border-right: transparent solid 0.8em;
    height: 0;
    margin-top: -0.7em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1px;    
}

/*---------->Navigation End<----------*/


/*---------->Social Start<----------*/

#social {
    float:left;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",    Helvetica, Arial, "Lucida Grande", sans-serif; 

}

#facebook, #twitter{
    background-color: #fff;
    border-radius: 20px;
    display: block;
    float: left;
    height: 32px;
    margin: 0 .5em 0 .5em; /*top, right, bottom, left*/
    -webkit-border-radius: 20px;
    width: 32px;    
}

.greydout{
    -moz-opacity: 0.25;
    opacity: 0.25;
    -webkit-opacity: 0.25;
}

.greydout:hover {
  -moz-opacity: 1;
  opacity: 1;
  -webkit-opacity: 1;
}

​</p>

4

1 回答 1

0

尝试使用边距：

#social {
  float:left;
  margin-top: 1.5em;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    
}
于 2013-01-05T04:22:14.620 回答