html - CSS 中的圆 Angular 矩形

Question

我想生成圆 Angular 矩形 - 按照 CSS 中的 UI，

但是我在生成它时遇到了一些困难。这是我的代码片段

ul {
            padding: 0;
            list-style-type: none;
            border: 1px solid #ccc;
            border-radius: 10px; 
}

li  {
            overflow: hidden;
}


li:last-child {
    padding:7px;
}

li:not(:last-child) {
    padding:7px;
    border-bottom:1px solid #DDD;
}


    .parent:nth-of-type(odd) {
        background-color: rgb(40,40,40);
}

    .parent:nth-of-type(even) {
        background-color: black;
}


<div>
<ul>
<li class="parent">
    <label class="labeltitle">NAME</label>
    <label id="firstTF">100</label>
    <label class="unitlabels">UNIT</label>
</li>
<li class="parent">
     <label class="labeltitle">NAME</label>
     <label id="secondTF">200</label>
     <label class="unitlabels">UNIT</label>
</li>
</ul>
</div>

Answer 1

您将边框放在 ul 元素上，而不是 li 元素上。你也没有关闭 ul

li  {
    border: 1px solid #ccc;
    border-radius: 10px; 

    overflow: hidden;
}

这是一个 jsfiddle:

http://jsfiddle.net/tsyg465a/