如何移动Google+旁边的GitHub图标?
HTML和JavaScript:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- title and meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Some demos for nicer css3 icons.">
<title>media widgets</title>
<!-- css -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css? family=Roboto+Slab">
<link rel="stylesheet" href="css/demo.css">
<!-- modernizr -->
<script src="js/common/modernizr.js"></script>
</head>
<body>
<a href="#" class="icon icon-mono facebook">facebook</a>
<a href="#" class="icon icon-mono twitter">twitter</a>
<div id="container">
<a href="#" class="icon icon-mono googleplus">google+</a>
<a href="#" class="icon icon-mono github">github</a>
</div>
<!-- demo js -->
<script src="js/demo/demo.js"></script>
<!-- ad -->
<script src="js/common/fusionad.js"></script>
<!-- analytics -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34160351-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
CSS:
.demo-nav {
margin-bottom: 24px;
text-align: center;
}
.demo-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.demo-nav li {
display: inline-block;
margin: 0 2px 4px 2px;
}
.demo-nav a {
display: block;
padding: 8px 24px;
color: #28aadc;
border: solid 2px #28aadc;
}
.demo-nav a:hover,
.demo-nav li.active a {
color: #fff;
background-color: #28aadc;
}
.component {
text-align: center;
}
.component__title {
margin-bottom: 12px;
color: #fff;
font-size: 22px;
font-weight: 700;
}
.icon {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 20px;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
z-index: 1000
}
.icon-mono {
background: url("../img/icons1.png");
background-image: url("../img/icons1.svg"), none;
background-color: #595959;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.header, .navigation {
width: 100%;
float:left;
height: 80px;
}
/* facebook */
.icon-mono.facebook {
background-position: 0 0;
float: none
}
.icon-mono.facebook:hover {
background-color: #3b5998;
background-position: 0 -96px;
}
/* twitter */
.icon-mono.twitter {
background-position: -96px 0;
float: none
}
.icon-mono.twitter:hover {
background-color: #4099ff;
background-position: -96px -96px;
}
#container {
width:50px;
}
/* google plus */
.icon-mono.googleplus {
background-position: -192px 0;
float: inherit
}
.icon-mono.googleplus:hover {
background-color: #d34836;
background-position: -192px -96px;
}
/* github */
.icon-mono.github {
background-position: -288px 0;
object-position: bottom
}
.icon-mono.github:hover {
background-color: #333333;
background-position: -288px -96px;
}
答案 0 :(得分:0)
一般情况下 - 如果你想让一些元素彼此相邻,你可以使用css选项float.Check示例http://www.w3schools.com/css/css_float.asp
来完成它。