Question

我正在使用HTML列表显示一些内容，但正在寻找更好的解决方案。我真的在寻找盒子上的圆角。

每个项目都必须放在带有圆角的容器中-不一定要在列表中。

.list-type5 {
  width: 100%;
  margin: 0 auto;
  font-family: 'Montserrat';
  font-size: 15px;
}

.list-type5 ol {
  list-style-type: none;
  list-style-type: decimal !ie;
  /*IE 7- hack*/
  margin: 0;
  margin-left: 1em;
  padding: 0;
  counter-reset: li-counter;
  font-family: 'Montserrat';
  font-size: 15px;
}

.list-type5 ol li {
  position: relative;
  margin-bottom: 1.5em;
  padding: 0.5em;
  background-color: #bfc4dc;
  padding-left: 58px;
  font-family: 'Montserrat';
  font-size: 15px;
}

.list-type5 a {
  text-decoration: none;
  color: black;
  font-family: 'Montserrat';
  font-size: 15px;
}

.list-type5 li:hover {
  box-shadow: inset -1em 0 #8b9dc3;
  -webkit-transition: box-shadow 0.5s;
  /* For Safari 3.1 to 6.0 */
  transition: box-shadow 0.5s;
  font-family: 'Montserrat';
}

.list-type5 ol li:before {
  position: absolute;
  top: -0.3em;
  left: -0.5em;
  width: 1.8em;
  height: 1.2em;
  font-size: 35px;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #8b9dc3;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  z-index: 99;
  overflow: hidden;
  content: counter(li-counter);
  counter-increment: li-counter;
  font-family: 'Montserrat';
}

<ol>
  <li>TEST 1</li>
  <li>TEST 2</li>
  <li>TEST 3</li>
</ol>

列表中的每个项目都需要圆角。尝试了几件事，但不确定是否可以使用，即使使用<table>-但在电话上的效果也不佳。

Answer 1

您可以在lis中添加跨度-给出边界和边界半径，并在li上使用边距或内边距将它们隔开吗？

如果您希望将商品内联-那么您可以在li's上使用display：inline-block并相应地更改样式。

ul{
  padding-left: 0;
}

li{
  list-style: none; 
  padding: 16px 0;
  }

li span { 
  padding: 8px;
  border-radius: 16px;
  border: solid 1px #d4d4d4;
}

<ul>
  <li><span>TEST 1</span></li>
  <li><span>TEST 2</span></li>
  <li><span>TEST 3</span></li>
</ul>

Answer 2

尝试这个

ul {
  list-style: none;
}

li {
  padding: 10px;
  border: 1px solid rebeccapurple;
  width: 50px;
  margin-bottom: 10px;
  border-radius: 5px;
  text-align: center;
}

<ul>
  <li>Task 1</li>
  <li>Task 2</li>
  <li>Task 3</li>
</ul>

Answer 3

试图使用一些代码，但不确定，因为您未提供html。希望对您有帮助

ol {
  list-style-type: none;
  list-style-type: decimal !ie; /*IE 7- hack*/
  margin: 0;
  margin-left: 1em;
  padding: 0;
  counter-reset: li-counter;
  font-family: 'Montserrat';
  font-size: 15px;
}

ol li {
  font-size: 18px;
  padding: 10px;
  background-color: #c6cfea;
  margin-bottom: 10px;
  border-radius: 4px;
  list-style-type: none;   
  /* display: inline-block; */
}

ol li:nth-of-type(even) {
  background-color: #eee;
}

ol li:hover
{
  box-shadow:inset -1em 0 #8b9dc3;
  -webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
  transition: box-shadow 0.5s;
  font-family: 'Montserrat';
}

ol li:nth-of-type(even):hover
{
  box-shadow:inset -1em 0 #aaa;
  -webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
  transition: box-shadow 0.5s;
  font-family: 'Montserrat';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ol>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ol>
</body>
</html>

通过CSS在HTML列表上的圆角

3 个答案: