Question

我想实现这个目标：

我想按照这个顺序放置图标，但我不知道如何，我尝试使用填充但是它不起作用，你能帮我吗？

<!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>

Answer 1

HTML：

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

的CSS：

.imgclass {
float: left
}

这应该做到

Answer 2

这些方面应该有效：

<div style="text-align: center; margin: 20px;">
    <img src="YouTube.png" class="Icon">
    <img src="Steam.png" class="Icon">
    <img src="FaceBook.png" class="Icon">
</div>

.Icon 
{
    display: inline-block;
    vertical-align: top;
    /* Add here padding and other styling */
}

如何定位这些图标？

2 个答案:

已编辑添加div容器