html - 无法在无序列表中显示行之间的边框

Question

我想使用无序列表创建一个弹出窗口，它给人一种整体表格的感觉。 表格代码部分为:

<div class="list-wrapper">              
<div class="row">
                <ul >
                    <li class="col-xs-1"><img src="./details_files/experience.png" alt=""></li>
                    <li class="col-xs-2" ><strong>Total Experience</strong></li>
                    <li class="col-xs-3" id= "url1">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                </ul>
</div>          

<div class = "row">         
                <ul>
                    <li class="col-xs-1"><img src="./details_files/clients.png" alt=""></li>
                    <li class="col-xs-2"><strong>Client Served</strong></li>
                    <li class="col-xs-3" id= "url1">2028</li>
                    <li class="col-xs-3">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                </ul>
            </div>
</div>

我用过 CSS:

.list-wrapper ul li { 显示:表格单元格；

vertical-align: top;
width: 185px;
font-size: 20px;
border-right: 5px solid #E6E6E6;
border-bottom: 5px solid #E6E6E6;

padding: 10px;
padding-bottom: 10000px;
margin-bottom: -10000px;
background-color: #FFF;

} 

这是我的弹出窗口的样子:

http://i.imgur.com/IjL2l3s.png

现在我想要在每行之间添加一个边框。 I.E 在总体体验和服务的客户之间我想要一个边界。

为了解释 css，我使用 padding-bottom 和 margin bottom 来自动调整所有行的大小以共享一个公共(public)边框。如果没有这段代码，我会弹出如下: http://i.imgur.com/ItqdvXD.png

我的目标是在行之间有一个共同的边界，并且有一种表格的感觉。请提问。

编辑:

humble rumble 提供的解决方案解决了边框问题，但是我希望单个单元格调整其高度并仍然具有单行边框

IE 对此:

<div class = "row">


                <ul>
                    <li class="col-xs-1"><img src="./details_files/services.png" alt=""></li>
                    <li class="col-xs-2" ><strong>Services</strong></li>
                    <li class="col-xs-3" id= "url1">
                            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Bar" class="inlineBlock">Bar</a>
                            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=DJ" class="inlineBlock">DJ</a>
                            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Ghazal" class="inlineBlock">Ghazal</a>
                            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Eleculicity%20Back-up" class="inlineBlock">Eleculicity Back-up</a>
                            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Air%20Conditioned" class="inlineBlock">Air Conditioned</a></li>
                <li class="col-xs-3">null</li>
                <li class="col-xs-3">null</li>
<!--                <li class="22%">null</li> -->

                </ul>
</div>

BAR、DJ、GHAZAL 都应该自动调整单元格高度

Answer 1

您需要删除 col-* 和 row 类，只使用 display: table-row 和 display: table -细胞。然后删除填充和边距。删除 col-* 类后，div 自然会采用相同的高度。

.list-wrapper ul {
    display: table-row;
}
.list-wrapper ul li {
    display: table-cell;
    width: 200px;
    font-size: 20px;
    border-right: 5px solid #E6E6E6;
    border-bottom: 5px solid #E6E6E6;
    padding: 10px;
    background: #fff;
}

<div class="list-wrapper">
    <ul>
        <li><img src="./details_files/services.png" alt="" /></li>
        <li><strong>Services</strong></li>
        <li id="url1">
            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Bar" class="inlineBlock">Bar</a>
            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=DJ" class="inlineBlock">DJ</a>
            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Ghazal" class="inlineBlock">Ghazal</a>
            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Eleculicity%20Back-up" class="inlineBlock">Eleculicity Back-up</a>
            <a href="http://www.eventila.com/eventila-web/search/restaurant/?services=Air%20Conditioned" class="inlineBlock">Air Conditioned</a>
        </li>
        <li>null</li>
        <li>null</li>
    </ul>
</div>