Question

我想生成圆角矩形 - 在CSS中跟随UI，

enter image description here

但是我在生成它时面临一些困难。这是我的代码片段

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

Heres a jsfiddle：

http://jsfiddle.net/tsyg465a/

Answer 2

为li添加样式

li{
border-radius: 10px;
}

Answer 3

如前所述，您需要将border和border-radius放在li上，而不是ul。这是CodePen，其中包含一些已清理的代码：http://codepen.io/trevanhetzel/pen/pJzws

HTML

<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> <!--you were missing a closing ul tag-->
</div>

CSS

ul {
  list-style-type: none;          
}

li  {
  overflow: hidden;
  border-radius: 10px; 
  border: 1px solid #ccc;
  padding: 7px;
  border-bottom: 1px solid #DDD;
}

li:last-child {
  padding:7px;
  border-bottom: 0;
}


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

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

Answer 4

＆＃13;

ul {
  display: inline-block;
  list-style: none;
}
.parent {
  border-radius: 10px;
  text-align: center;
  border: 2px solid rgb(61, 58, 58);
  line-height: 0.8;
  padding: 5px 24px;
}
.parent:nth-of-type(odd) {
  background-color: rgb(40, 40, 40);
}
.parent:nth-of-type(even) {
  background-color: #444;
}
.parent label {
  display: block;
  padding: 5px;
}
.labeltitle,
.unitlabels {
  color: #fff;
}
.tf {
  font-size: 28px;
}

＆＃13;

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

＆＃13;

Answer 5

这是一个基于您的代码的JSFiddle解决方案： http://jsfiddle.net/shannabarnard/2an76txm/

HTML：

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

CSS：

ul {
     padding: 0;
     list-style-type: none;
      width: 120px;          
}

li  {
    overflow: hidden;
    border-radius: 10px; 
    border:1px solid #000;
}

li label {
    display:block;
    text-align: center;
    font-size: 24px;
    padding:3px 0;
}
li label.labeltitle {
    font-size: 16px;
    color: #CCC;
}
li label.unitlabels {
    font-size: 16px;
    color: white;
}
.parent:nth-of-type(odd) {
   background-color: #555;
}

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

Answer 6

您必须将圆边样式应用于<li>而非<ul>
您应用于<ul>的几乎所有样式都属于<li>

li {
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    max-width: 100px;
}

DEMO：使用其他样式来更接近地模仿您想要的输出

CSS中的圆角矩形

6 个答案: