通過css在HTML列表上圓角
[英]Rounded corners on HTML List via css
問題描述
我正在使用 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> - 但在手機上看起來不太好。
3 個解決方案
解決方案1
0 2019-07-03 06:38:08
您可以向 lis 添加跨度 - 以提供邊框和邊框半徑並在 li 上使用邊距或填充將它們隔開嗎？
如果您想要內聯項目 - 那么您可以在 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
試試這個
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
嘗試使用您的一些代碼但不確定，因為您沒有提供 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>
HTML 和 CSS：表格上的圓角
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.