Css 如何定位这些图标?

Css 如何定位这些图标?,css,positioning,Css,Positioning,我想做到这一点: 我想按此顺序放置图标,但我不知道如何放置,我尝试了填充,但不起作用,你能帮我吗 <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" media="screen" href="res/c

我想做到这一点:

我想按此顺序放置图标,但我不知道如何放置,我尝试了填充,但不起作用,你能帮我吗

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="res/css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<title>Loopie's Workshop</title>
</head>
<body>

<div class="content">
    <h1>Loopie's workshop</h1>
</div>

<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
            <img src="images/img_1.jpg" alt="Cougar"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="images/img_2.jpg" alt="Lions"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>

            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="images/img_3.jpg" alt="Snowalker"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>

            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="images/img_4.jpg" alt="Howling"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>

            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="images/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
          <div class="progress-bar"></div>          
      </div>
    </div>
</div>
<h1 style="font-size:30px"; align="center">Game and web developer</h1>
</body>
</html>

罗比工作室
罗比工作室
  • 美洲狮
  • 狮子
  • 雪人
  • 嚎叫
  • 日光浴
游戏和网络开发者
html:

<img src="facebook.png" class="imgclass">
<img src="gplus.png" class="imgclass">
<img src="twitter.png" class="imgclass">

这应该可以做到

按照这些思路应该可以做到:


。图标
{
显示:内联块;
垂直对齐:顶部;
/*在此处添加填充和其他样式*/
}

编辑以添加div container请发布您所拥有的代码far@Loopie请参阅我的编辑。然后相应地修改
中的边距,使其降低或升高。非常感谢,先生!:D@Loopie很荣幸,如果答案回答了您的问题,请不要忘记将其标记为已接受:)。
.imgclass {
float: left
}