[Import] Start learning web standards

I have been modifying the emoticons in the blog comment box last night.
I was going to use the table to draw the image, but the actual results made me stunned:
It can be displayed in IE, but it cannot be displayed in table in Firefox, even if it is <Table> <tr> <TD> test </TD> </tr> </table>
You cannot view test, but it is normal in IE!
So I decided to do it myself.
First, I want to use Li to locate the problem,
Li is a list, which is displayed vertically by default, for example:

• 1111
• 2222
• 3333

This is certainly not the case, so you need to convert the list from vertical display to horizontal display. This implementation is only available to you! -___-, Just define float: Left; for Li.
The list can be displayed horizontally, but what should I do with the list symbol? I still know this. Just define list-style: none; for Li.

Let yi fei look at it. He said: this has a syntax error. Li is intended to be used with UL. It is wrong to use it independently.
Haha, there are many different guides.
The following CSS is displayed.
. Toolsul {
List-style: none;
Margin: 0px;
Padding: 0px;
}
. Toolsul Li {
Float: left;
Margin: 5px 1px 0 1px;
List-style: none;
Border: 1px solid # FFF;
}
$ Ad $
This is correct, and the horizontal display of emoticon images can be realized, but I am not satisfied, because there are 30 emoticon, I want to "change one line" after every 10 emoticon ",
That is to say, to achieve the effect of line breaks in UL and Li, directly adding <br/> is definitely not acceptable. I asked the experts, so I can say:
Add a width to Li, and then add a width to Ul. UL's width is approximately equal to Li's width * 10. When the total width of Li reaches UL's width, the line breaks.
Haha.
Add Li
Width: 50px; because the width attribute of an expression is 50
Then add width: 500px to Ul. The preview result is incorrect. It should be UL's width smaller point. Add it to 520px.

Once again, I want to show a border when I move the mouse over the expression,
Add one to Li: hover. This trick was found during reading the blog of bohemian. I didn't expect it to be written like this in CSS. The final CSS is like this.
}
. Toolsul {
List-style: none;
Margin: 0px;
Width: 520px;
Padding: 0px;
}
. Toolsul Li {
Float: left;
List-style: none;
Width: 50px;
Height: 50px;
Cursor: pointer;
Border: 1px solid # FFF;
}
. Toolsul Li: hover {
Border: 1px solid #000;
}
When you click more expressions in the comments, there will be 30 expressions, and each 10 will have a line break, to achieve the effect I need.

Source: http://www.lemongtree.com/Archives/600.aspx