<ul> <li> with boxes/divs

i created a box, and now i want to replicate it four times, make 4 boxes horizontally aligned but don't want to paste 4 times the code, any way to do thi开发者_如何学Gos with <li> tag?

The html:

<div id="promos">

    <div class="promoinside">promo</div>

</div>

the css:

#promogrid{
    width:auto;
    height: auto;
    background-color: #ffffff;
}

#promos{
    position: relative;
    margin: 10px 5px 10px 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:225px;
    height:160px;
    background-color: #fff;
    border-style:solid;
    border-width:1px;
    border-color: #cacaca;
    -moz-box-shadow: 0 0 4px #dadada;
    -webkit-box-shadow: 0 0 4px#dadada;
    box-shadow: 0 0 3px #dadada;
}

.promoinside{
    position: absolute;
    margin: 3px 4px 4px 3px;
    width: 219px;
    height: 154px;
    background: #f5f5f5;
    background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));     background: -moz-linear-gradient(top, #fafafa, #eeeeee); 
}

.promoinside:hover{
    background: #fbfbfb;
}

---

You can definitely do that using li. Divs are valid inside li tags (see Is div inside list allowed?). You're much better off writing the code for each box manually, as it involves a minimal amount of code compared to creating them dynamically. (If the boxes change a lot however you would be better off making them dynamic.)

<ul id="promos">
    <li><div class="promoinside">promo</div></li>
</ul>

ul#promos {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ul#promos li {
    display: inline;
}

---

Well so far I haven't heard of thing like that to do with CSS.

What about the data inside the Tags? You can replicate that if you are using some sort of CMS, or dynamically drawing the divs.

I guess that it's logical that you want to put different data inside. Even if you replicate the divs - you should put data in each of that.

I guess the best way to do it is to support your HTML dynamically.