时间戳

首页 > 解决方案 > 社交媒体图标不是垂直对齐而不是水平对齐

html - 社交媒体图标不是垂直对齐而不是水平对齐

问题描述

试图让侧边栏图标水平显示；它们对我来说是垂直的。老实说，我不太了解我为 CSS 复制和粘贴的内容，但我只想要顶部的列表（如导航栏）和一个边栏，我在每个页面上复制和粘贴以始终具有社交媒体链接。//情人项目如果你不能告诉//

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: top center;

    height: auto;

    background: #333;

    font-family: 'Roboto', sans-serif;

}



ul {

    margin: 0;

    padding: 0;

    display: flex;

}



ul li {

    list-style: none;

    margin: 0 20px;

    transition: 0.5s;

}



ul li a {
    top: 10%;

    display: block;

    position: relative;

    text-decoration: none;

    padding: 5px;

    font-size: 25px;

    font-family: 'Roboto', sans-serif;

    font-weight: bold;

    color: #fff;

    text-transform: uppercase;

    transition: 0.5s;

}



ul:hover li a {

    transform: scale(1.5);

    opacity: .2;

    filter: blur(5px);

}



ul li a:hover {

    transform: scale(2);

    opacity: 1;

    filter: blur(0);

}



ul li a:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #ff497c;

    transition: transform 0.5s;

    transform-origin: right;

    transform: scale(0);

    z-index: -1;

}



ul li a:hover:before {

    transition: transform 0.5s;

    transform-origin: left;

    transform: scaleX(1);

}

.sidebar {
    height: 50px;
    width: 0;
    position: fixed;
    z-index: 1;
    bottom: 0%;
}

#katy-fb {
    display: block;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/doodle-bop/Assets/icons/katy-fb.png);
    background-size: 50px 50px;
}

#geo-fb {
    display: block;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/doodle-bop/Assets/icons/geo-fb.png);
    background-size: 50px 50px;
}

#katy-twit {
    display: block;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/doodle-bop/Assets/icons/katy-twit.png);
    background-size: 50px 50px;
}

#geo-twit {
    display: block;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/doodle-bop/Assets/icons/geo-twit.png);
    background-size: 50px 50px;
}

#insta {
    display: block;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/doodle-bop/Assets/icons/instagram.png);
    background-size: 50px 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/doodle-bop/Code/Styles/index.css">
  <title>Katy and Geo</title>
</head>

<body>
  <ul>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Other</a></li>
    <li><a href="#">what</a></li>
  </ul>
  <div class="sidebar">
    <div class="social-icons">
      <a target="_blank" href="#"><span class="icon" id="insta"></span></a>
      <a target="_blank" href="#"><span class="icon" id="geo-twit"></span></a>
      <a target="_blank" href="#"> 
      <span class="icon" id="geo-fb"></span></a>
      <a target="_blank" href="#"><span class="icon" id="katy-twit"></span></a>
      <a target="_blank" href="#"> 
      <span class="icon" id="katy-fb"></span></a>
    </div>
  </div>
</body>

</html>

标签： htmlcss

解决方案

推荐阅读