Question

我创建了一个盒子，现在我想复制它四次，使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;
}

Answer 1

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

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

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

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

Answer 2

你绝对可以使用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;
}

<ul> <li> with boxes / divs </li> </ul>

2 个答案: