如何将小部件元素移动到不同位置的html/css？答案

【问题标题】：How to move widgets elements in different positions html/css?如何将小部件元素移动到不同位置的html/css？
【发布时间】：2017-01-22 00:08:27
【问题描述】：

如何将 GitHub 图标移到 Google+ 旁边？

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;
   }

【问题讨论】：

请更新代码以使其更具可读性，如果您可以从中创建一个sn-p，那就更好了。
请花时间格式化您的代码。这次我为你做了。但人们往往不会尊重不尊重读者的问题。
谢谢！对此感到抱歉！

标签： html css hover widget containers

【解决方案1】：

一般来说 - 如果你想让一些元素彼此相邻，你可以使用 css 选项 float 来完成它。检查示例 http://www.w3schools.com/css/css_float.asp

【讨论】：