How to arrange small icons horizontally_html/css_WEB-ITnose

They all take small pictures from a big picture. How can I arrange the small icons horizontally like the bottom picture?



css

.rtf{background:url(allbgs.png) no-repeat 0px 0px;width:13px;padding-top:18px;}.txt{background:url(allbgs.png) no-repeat -13px 0px;width:13px;padding-top:18px;}.excel{background:url(allbgs.png) no-repeat -26px 0px;width:16px;padding-top:18px;}.word{background:url(allbgs.png) no-repeat -42px 0px;width:16px;padding-top:18px;}.pdf{background:url(allbgs.png) no-repeat -58px 0px;width:16px;padding-top:18px;}.ppt{background:url(allbgs.png) no-repeat -74px 0px;width:16px;padding-top:18px;}

html

        <div class="error">        <div class="word"></div>        <div class="rtf"></div>            MS Office文档<div class="excel"></div> ,docxppt,pptxxls,xlsxvsdpotppsrtf <br />PDF pdf<br />纯文本 txt        </div>

Reply to discussion (solution)

Try controlling the position of your div
Try floating the div of the icons you want to arrange together
Or try using table layout without

Control the position of your div Try the position
Try floating the div of the icons that you want to arrange together
Or try using table layout

If you don’t want to use table, can you post the code for me?

If you use a div background, then you need to add floating float to the div: left

In fact, it is very simple to achieve this effect. Place a horizontal div, control the width and height, and directly use img Tag and put the image in the div

In fact, it is very simple to achieve this effect. Place a horizontal div, control the width and height, and just use the img tag to put the image in the div

In this case, each small icon must be made into a file, right? I want to put all the small icons in a file

Quoting the reply from emperor_v5 on the 4th floor: In fact, it is very simple to achieve this effect. Put a horizontal div, control the width and height, and directly use the img tag to place the image Just put it in a div

In this case, each small icon must be made into a file, right? I want to put all the small icons in one file
Well, yes, I have to cut out each picture to make a picture

I'm sweating, I'm speechless, I'm sweating like a waterfall.

*{margin0;padding:0;}.demo_ico a{ display: block; float:left; height:16px; padding:5px 12px;line-height:16px;}.demo_ico i{width:16px;height:16px;background-image:url(http://img.my.csdn.net/uploads/201301/31/1359592718_8462.jpg); float:left; background-repeat:no-repeat;}.one i{ background-position:-139px -16px;}.two i{background-position:-218px -16px;}.threee i{background-position:-194px -40px;}.four i{background-position:-235px -40px;}.five i{background-position:-139px -112px;}.demo_ico span{ margin-left:8px;}

<div class="demo_ico">   <a href="" class="one"><i></i><span>第一个</span></a>   <a href="" class="two"><i></i><span>第二个</span></a>   <a href="" class="threee"><i></i><span>第三个</span></a>   <a href="" class="four"><i></i><span>第四个</span></a>   <a href="" class="five"><i></i><span>第五个</span></a></div>

 .one i{ background-position:-139px -16px;}.two i{background-position:-218px -16px;}.threee i{background-position:-194px -40px;}.four i{background-position:-235px -40px;}.five i{background-position:-139px -112px;} 

What is defined here is the format of i , how to use it in ?

Unless you redo the image, there will be problems if it is not positioned.

Additional information: It means to rearrange all the small pictures.

In this case, it is more practical to separate the pictures, and the code is easy to write and modify:)

.rtf{background:url(allbgs.png) no-repeat 0px 0px;width:13px;padding-top:18px; float:left; margin-left:5px;}.txt{background:url(allbgs.png) no-repeat -13px 0px;width:13px;padding-top:18px; float:left; margin-left:5px;}.excel{background:url(allbgs.png) no-repeat -26px 0px;width:16px;padding-top:18px; float:left; margin-left:5px;}.word{background:url(allbgs.png) no-repeat -42px 0px;width:16px;padding-top:18px; float:left; margin-left:5px;}.pdf{background:url(allbgs.png) no-repeat -58px 0px;width:16px;padding-top:18px; float:left; margin-left:5px;}.ppt{background:url(allbgs.png) no-repeat -74px 0px;width:16px;padding-top:18px; float:left; margin-left:5px;}

in each icon Add float:left;

after the style unless you redo the image or positioning it will cause problems.

There is a tool that can automatically combine small images into large images, and then generate positioning. The css above is automatically generated.