Tôi muốn kiểu một <ul> để hiển thị tất cả các mục trong một hộp với góc tròn (xem dưới đây):Phong cách danh sách không có thứ tự để hiển thị danh sách các mục trong hộp góc tròn
Có thể sử dụng CSS và chỉ <ul> (không có thêm <div> s và bảng), vì tôi sẽ sử dụng nó trong hệ thống CMS để tạo kiểu cho tất cả <ul> s do người dùng tạo?
tôi đã có thể tái tạo lại hình ảnh của bạn bằng cách sử dụng sau đây (X) HTML và CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UL Corners</title>
<style type="text/css">
ul {
background-color: #EBEBEB;
list-style-image: url(arrow.png);
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
padding: 15px;
width: 410px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
li {
margin: 10px;
margin-left: 25px;
}
</style>
</head>
<body>
<ul>
<li>
Functional DR (Disaster Recovery)
</li>
<li>
Virtual off site contact centre management
</li>
<li>
Technology, Connectivity, Process and Resource Management in disaster recovery site
</li>
<li>
Mission Critical Response Service Level Agreements and Logistical management
</li>
</ul>
</body>
</html>
Kết quả cuối cùng trông như thế này:
screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png
Nhưng nó chỉ hoạt động trong Firefox , Chrome, Safari và bất kỳ trình duyệt nào hỗ trợ CSS3. Điều đó đáng buồn là không bao gồm IE.
Dưới đây là một ví dụ khá tốt của các góc tròn sử dụng CSS3: CSS3 Rounded corners
này sẽ chỉ làm việc trong Firefox và Safari mặc dù.
Chỉ sử dụng thẻ UL, tôi không biết giải pháp CSS 2 thuần túy cho khối chiều cao thay đổi (đối với chiều cao cố định: bạn có kỹ thuật cửa trượt).
Bạn có thể muốn xem giải pháp JS + CSS: nifty corners.
Hãy xem jQuery Corner để biết thêm giải pháp vào cua tròn ;-) Nó liên quan đến JS cũng như CSS, nhưng có nhiều tính linh hoạt vượt trội.
Góc jQuery không hoạt động đối với IE – Yosef
Nếu bạn có thể tag các li cuối cùng, bạn có thể đặt các góc đáy trên đó - My rounded corner list.
ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}
<ul>
<li>one</li>
<li>two</li>
<li class="last">three</li>
</ul>
Nếu IE6 và 7 không phải là một mối quan tâm, bạn có thể sử dụng ul li:last-child thay vì ul li.last.
https://jsfiddle.net/1u3nma6t/ trong trường hợp những người khác cần xem trực tiếp. – Si8