通过css在HTML列表上圆角
[英]Rounded corners on HTML List via css
问题描述
I'm using a HTML list to display some content, but looking for a nicer solution.
我正在使用 HTML 列表来显示一些内容，但正在寻找更好的解决方案。 I'm really looking for rounded corners on the boxes.我真的在寻找盒子上的圆角。
Each item needs to be in container that has rounded corners - not necessarily in a list.每个项目都需要在有圆角的容器中 - 不一定在列表中。
.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>
Need rounded corners on each item in the list.需要在列表中的每个项目上圆角。 tried a few things but not sure if it's possible now, even using <table> - but did not look good on phone.尝试了一些东西，但不确定现在是否可行，即使使用<table> - 但在手机上看起来不太好。
3 个解决方案
解决方案1
0 2019-07-03 06:38:08
Can you add spans to the lis - to give the borders and border radius and use margin or padding on the li's to space them out?您可以向 lis 添加跨度 - 以提供边框和边框半径并在 li 上使用边距或填充将它们隔开吗？
If you want the items inline - then you can use display: inline-block on the li's and change hte styles accordingly.如果您想要内联项目 - 那么您可以在 li 上使用 display: inline-block 并相应地更改 hte 样式。
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>
解决方案2
0 2019-07-03 06:45:17
Try out this one试试这个
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>
解决方案3
0 已采纳 2019-07-03 06:56:20
Tried to use some of your code but not sure as you didn't provide html.尝试使用您的一些代码但不确定，因为您没有提供 html。 Hope that'll help希望这会有所帮助
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.