Question

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 this 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;
}

Answer 1

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;
}