<ul> <li> 带框/div答案

【问题标题】：<ul> <li> with boxes/divs<ul> <li> 带框/div
【发布时间】：2011-09-24 09:59:15
【问题描述】：

我创建了一个盒子，现在我想复制它四次，使 4 个盒子水平对齐但不想粘贴 4 次代码，有什么方法可以使用 <li> 标签来做到这一点？

html:

<div id="promos">

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

</div>

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

【问题讨论】：

标签： html css markup

【解决方案1】：

使用 li 绝对可以做到这一点。 Div 在 li 标签内有效（参见Is div inside list allowed?）。您最好手动为每个框编写代码，因为与动态创建它们相比，它涉及的代码量最少。（如果盒子变化很大，但最好让它们动态化。）

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

【讨论】：

【解决方案2】：

到目前为止，我还没有听说过与 CSS 相关的事情。

标签内的数据呢？如果您使用某种 CMS 或动态绘制 div，则可以复制它。

我想您想在其中放入不同的数据是合乎逻辑的。即使您复制 div - 您也应该将数据放入其中。

我想最好的方法是动态地支持你的 HTML。

【讨论】：

问题是CMS（Cubecart）使用XTemplate，我不熟悉这种方式的构造。