मैं एक <ul> शैली गोलाकार कोनों के साथ एक बॉक्स में सभी आइटम प्रदर्शित करना चाहते हैं (देखें नीचे):शैली बिना क्रम वाली सूची गोल कोने बॉक्स में सूची आइटम प्रदर्शित करने के लिए
यह संभव उपयोग करने के लिए है सीएसएस और केवल <ul> (बिना अतिरिक्त <div> एस और टेबल के साथ), क्योंकि मैं इसे उपयोगकर्ता द्वारा बनाए गए सभी <ul> एस शैली के लिए एक सीएमएस सिस्टम में उपयोग करने जा रहा हूं?
मैं का उपयोग कर अपनी छवि बनाने में समर्थ था निम्नलिखित (एक्स) एचटीएमएल और सीएसएस:
<!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>
अंतिम परिणाम इस प्रकार है:
screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png
लेकिन यह केवल फ़ायरफ़ॉक्स में काम करता है , क्रोम, सफारी और CSS3 का समर्थन करने वाला कोई भी ब्राउज़र। दुख की बात है आईई को छोड़कर।
यहाँ CSS3 का उपयोग कर गोल कोनों में से एक बहुत अच्छा उदाहरण है: CSS3 Rounded corners
यह केवल हालांकि फ़ायरफ़ॉक्स और सफारी में काम करेंगे।
केवल यूएल टैग का उपयोग करके, मुझे परिवर्तनीय ऊंचाई ब्लॉक के लिए शुद्ध सीएसएस 2 समाधान नहीं पता है (निश्चित ऊंचाई के लिए: आपके पास स्लाइडिंग दरवाजे की तकनीक है)।
आप एक जेएस + सीएसएस समाधान देखना चाहते हैं: nifty corners।
अधिक गोलाकार कोनेरिंग समाधान के लिए jQuery Corner पर एक नज़र डालें ;-) इसमें जेएस के साथ-साथ सीएसएस भी शामिल है, लेकिन इसमें बहुत से बॉक्स ऑफ लचीलेपन हैं।
jQuery कॉर्नर आईई – Yosef
आप पिछले ली टैग कर सकते हैं, तो आप उस पर नीचे कोनों डाल सकते हैं - 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>
IE6 और 7 एक चिंता का विषय नहीं हैं, आप ul li:last-child बजाय ul li.last उपयोग कर सकते हैं।
https://jsfiddle.net/1u3nma6t/ के लिए काम नहीं कर रहा है अगर अन्य लोगों को इसे लाइव देखना है। – Si8