تگ <ul> در HTML یک لیست نامرتب (نقطه‌ای) رو تعریف می‌کنه.
یک لیست نامرتب با تگ <ul> شروع میشه. هر آیتم لیست با تگ <li> آغاز میشه. آیتم‌های لیست به صورت پیش‌فرض با نقطه‌های کوچک سیاه (bullets) مشخص می‌شن:
مثال:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ویژگی CSS list-style-type برای تعریف استایل نشانگر آیتم لیست استفاده میشه. این ویژگی می‌تونه یکی از مقادیر زیر رو داشته باشه:
Disc (نقطه توپر)
مثال - Disc:
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Circle (دایره)
مثال - Circle:
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Square (مربع)
مثال - Square:
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>بدون نشانگر لیست
مثال - None:
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
لیست‌ها می‌تونن تودرتو باشن (لیست داخل لیست):
مثال:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>نکته: یک آیتم لیست (<li>) می‌تونه شامل یک لیست جدید، و سایر عناصر HTML مثل تصاویر، لینک‌ها و غیره باشه.
لیست‌های HTML رو میشه به روش‌های مختلفی با CSS استایل داد. یک روش رایج، استایل دادن به لیست به صورت افقی برای ایجاد یک منوی ناوبری هست:
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
از عنصر <ul> HTML برای تعریف یک لیست نامرتب استفاده کنید.
از ویژگی CSS list-style-type برای تعریف نشانگر آیتم لیست استفاده کنید.
از عنصر <li> HTML برای تعریف یک آیتم لیست استفاده کنید.
لیست‌ها می‌تونن تودرتو باشن.
آیتم‌های لیست می‌تونن شامل عناصر HTML دیگه باشن.
از ویژگی CSS float:left برای نمایش یک لیست به صورت افقی استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/