Question

大家好我有一个从数据库生成的信息列表，总共我在我的数据库中有3个项目，此时此代码生成列表，每个项目都有一个边框 - 目前的问题是边框重叠，因此在项目列表的内部，边框比外部厚。

如何制作，以便列表中的每个项目之间有间距，但它们会保留其边框？

干杯！

<div id="SearchResults">
    <ul class="ListView">

        @foreach (var item in Model)
        {
            <li>

                @Html.DisplayFor(modelItem => item.Name)<br />
                @Html.DisplayFor(modelItem => item.Email)<br />
                @Html.DisplayFor(modelItem => item.PostCode)<br />
                @Html.DisplayFor(modelItem => item.GroupID)<br />
                @Html.DisplayFor(modelItem => item.Biography)<br />
                @Html.DisplayFor(modelItem => item.ResearcherID)<br />
                @Html.DisplayFor(modelItem => item.KeySkills)<br />
                @Html.DisplayFor(modelItem => item.Phone)<br />


            </li>
        }

    </ul>

</div>

.ListView{

    list-style:none;
    width:100%;    
}



.ListView li{
    float:left;
    border:1px solid green;
    padding:15px;

}

Answer 1

从所有li中删除边框，然后通过添加以下内容来使用连续选择器：

.ListView li + li {
    border-left: 1px solid green;
 }

Answer 2

添加margin-left：如果它们是水平和margin-top：如果它们是垂直的。

例如

.ListView li{
float:left;
border:1px solid green;
padding:15px;
margin-top: 5px;

}

带有空格的列表项周围的边框

2 个答案: