为什么我的社交媒体图标很大？

我试图将一些社交媒体图标添加到我的头文件中，它们比他们应该大10倍。我已经通过了CSS并使用了萤火虫，但我无法找到正在做什么。为什么我的社交媒体图标很大？

我希望他们是他们的常规大小，并坐在标题的右上角。提前致谢！！

这里是什么样子（http://www.bolistylus.com）：

enter image description here

这里的style.css中：

a { 
    color: #254655; 
} 

ul, ol { 
    margin: 0 0 0 5.5em; 
} 

#page { 
    margin: 0 auto; 
} 

body{ 
background: #f3f3f3; 
border-top: none; 
border-top: 10px solid #666666; 
} 

#page { 
    margin: 0em auto; 
    width: 1000px; 
} 

.singular.page .hentry { 
    padding: 0.5em 0 0; 
} 

#branding{ 
background: #f3f3f3; 
color: #000000; 
border-top: none; 
position: relative; 
z-index: 2; 
} 

#site-title { 
    /*margin-right: 270px;*/ 
    padding: 0.66em 0 0 0; 
} 

#site-title a { 
    color: #111111; 
    font-size: 60px; 
    font-weight: bold; 
    line-height: 36px; 
    text-decoration: none; 
} 

#branding h1, header#branding a{ 
text-align: left; 
margin-right: 0; 
} 

#branding span{ 
text-align: center; 
} 

#branding img { 
    height: auto; 
    margin-bottom: -.66em; 
    width: 30%; 
} 

#branding .widget{ 
position: absolute; 
top: 2em; 
right: 7.6%; 
} 

#respond{ background: #E7DFD6; }      

.welcome{ 
margin: 15px 60px; 
background: #f3f3f3; 
border: 1px solid #f6ff96; 
padding: 15px; 
text-align: center; 
} 

/* =Menu 
-------------------------------------------------------------- */ 
/*.header_nav ul{ 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    width: 400px; 
    } 
*/ 

#branding img .sm-img { 
    height: auto; 
    margin-bottom: -.66em; 
    width: 100%; 
} 

.header_nav { 
    background: #f3f3f3 
    } 


.header_nav .head-nav { 
    border-bottom: 1px solid #cfcec9; 
    border-top: 1px solid #cfcec9; 
    margin-top: 30px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    text-align: right 
    } 

.header_nav ul li{ 
    display: inline; 
    } 

.header_nav ul li a{ 
    padding: 10.5px 21px; 
    color: #000000; 
    } 

.header_nav ul li a:hover, .menu ul li .current{ 
    color: #a8cb17; 
    text-decoration: none; 
    } 



#access { 
    background: #f3f3f3; /* Show a solid color for older browsers */ 
} 
#access ul { 
    font-size: 13px; 
    list-style: none; 
    margin: 0 0 0 -0.8125em; 
    padding-left: 0; 
} 
#access li { 
    float: center; 
    position: relative; 
    display: inline; 
} 
#access a { 

} 
#access ul ul { 

} 
#access ul ul ul { 

} 
#access ul ul a { 

} 
#access a:focus { 
} 
#access li:hover > a, 
#access a:focus { 
} 
#access ul li:hover > ul { 
} 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
    font-weight: bold; 
}

来源

2012-01-18 novicePrgrmr

你在CSS中指定一个百分比宽度多次，这里的线路：

style.css (line 70) 
    #branding img { 
     height: auto; 
     margin-bottom: -0.66em; 
     width: 30%; //remove 
    } 

    style.css (line 530) 
    #branding img { 
     height: auto; 
     margin-bottom: -7px; 
     width: 100%; //remove 
    }

删除那些他们应该显示正常。

来源

2012-01-18 23:18:08

在这里试着改变你的CSS：

#branding img { 
height: auto; 
margin-bottom: -0.66em; 
width: 3%; /* 3 not 30 */

}

在style.css的线70

来源

2012-01-18 23:17:24 Kath

style.css的第70行是设置一个值为30％的宽度属性。这会导致图像伸展到其容器的30％。

#branding img { 
height: auto; 
margin-bottom: -.66em; 
width: 30%; 
}

将宽度调整为较低的百分比或完全删除该行。

来源

2012-01-18 23:19:22

为什么我的社交媒体图标很大？

回答

相关问题