সিএসএস list-style-position প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| list-style-position | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
list-style-position property নির্দিষ্ট করে তালিকা চিহ্ন ভিতরে না বাইরে প্রদর্শিত হওয়া উচিত
Outside:
- Coffee
- Tea
- Coca-cola
Inside:
- Coffee
- Tea
- Coca-cola
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| outside | হ্যাঁ | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
list-style-position:inside/outside/initial/inherit;
লিস্ট আইটেম কোথায় প্রদশর্ন করবেন সুনির্দিষ্ট ভাবে উল্লেখ করুন (একটি অতিরিক্ত খাঁজ ফলাফল):
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}ul.b {
list-style-position: outside;
}
</style>
</head>
<body>
<p>নিচের লিস্টটিতে list-style-position: inside:</p>
<ul class="a">
<li>পরানের চা-এক কাপ ভালো চা</li>
<li>শরীফের চা-এক কাপ black চা</li>
<li>মৌসুমির চা-এক কাপ green চা</li>
</ul>
<p>নিচের লিস্টটিতে list-style-position: outside:</p>
<ul class="b">
<li>পরানের চা-এক কাপ ভালো চা</li>
<li>শরীফের চা-এক কাপ black চা</li>
<li>মৌসুমির চা-এক কাপ green চা</li>
</ul>
<p>"list-style-position: outside" ডিফল্ট সেটিং</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.listStylePosition="inside"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
li {
background-color:lightblue;
}
</style>
</head>
<body>
<p> লিস্টের স্টাইল পরিবর্তন করার জন্য "Try" বাটন ক্লিক করুন।</p>
<button onclick="myFunction()">Try</button>
<ul id="listStyle">
<li>ই-মেইল</li>
<li>টোবিয়াস</li>
<li>লিনাস</li>
</ul>
<script>
function myFunction() {
document.getElementById("listStyle").style.listStylePosition = "inside";
}
</script>
</body>
</html>
ফলাফল
list-style-position প্রোপার্টির ভ্যালু-সমূহ
- inside - মার্কার এবং টেক্সট ইনডেন্ট। নিচের কনটেন্ট বুলেট ভিতরে প্রদর্শিত হয়েছে ।
- outside - টেক্সট-এর বাঁদিক থেকে মার্কার রাখুন। বুলেট বিষয়বস্তু বাইরে প্রদর্শিত হবে । এটি ডিফল্ট।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
list-style-position প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।