نحوه نمایش لیست ul li در یک خط افقی

یک لیست توسط دستور ul و li توی html میخوام درست کنم. ولی لیست رو به صورت عمودی و زیر هم نمایش میده. میخوام ببینیم چجوری میتونم لیست رو به صورت افقی نمایش بدم.

لیست ایجاد شده توسط ul و li

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

خروجی :

لیست با ul در html

مشخصات سوال کننده :

کاربر : hamid_b امتیاز کاربر : 518 رتبه کاربر : 4

دسته بندی : Html Css

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 6996

هوش مصنوعی

پاسخ هوش مصنوعی

برای نمایش یک لیست <ul> به صورت افقی، می توانید از CSS استفاده کنید. با استفاده از خاصیت display می توانید عناصر <li> را به صورت افقی قرار دهید. در زیر CSS مورد نیاز را برای این کار مشاهده می کنید:


ul {
    list-style-type: none; /* حذف نقاط لیست */
    padding: 0; /* حذف پدینگ */
    margin: 0; /* حذف مارجین */
}

li {
    display: inline; /* نمایش به صورت inline */
    margin-right: 10px; /* فاصله بین عناصر */
}

شما می توانید این CSS را در قسمت <style> یا به صورت یک فایل جداگانه CSS اضافه کنید. پس از اضافه کردن این استایل به HTML شما، لیست به صورت افقی نمایش داده خواهد شد.

کد HTML شما با CSS به این صورت خواهد بود:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : mohammad-i 09:26 1399/06/28

برای این کار فقط لازمه توسط CSS خاصیت display:inline-block رو به تگ های li بدید.

<html>
<head>
	<style>
		ul li{
			display:inline-block;
	}
	</style>
</head>
<body>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

</body>
</html>

به این پاسخ امتیاز بدهید 1

امتیاز: 260 رتبه: 7

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

نحوه نمایش لیست ul li در یک خط افقی

لیست ایجاد شده توسط ul و li

پاسخ هوش مصنوعی

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین