تنسيق القوائم باستخدام css

يمكن اجراء العديد من التنسيقات على القوائم من خلال css وذلك بجعل القوائم الرأسية تظهر أفقيا
وذلك من خلال css

<style>

ul{

display: inline

}

</style>

مثال:

<style>

                ul li{

                    display: inline;

                }

            </style>

        </head>

        <body>

            <h2>office applications</h2>

            <ul>

                <li>word</li>

                <li>excel</li>

                <li>power point</li>

                <li>access</li>

            </ul>

ناتج المثال:

وبمزيد من التنسيقات باستخدام css يمكن جعل القوائم تظهر كما يلى:-

<style>

  #list{padding:0;}

#list li{

   display: inline;

  }

 #list  a {

   background-color:black;

   color:white;

   padding:10px;

   text-decoration: none;

   border-radius: 6px 6px 6px 6px;

  }

  #list  a:hover{background-color: #dd0}

 </style>

</head>

<body >

 <h2>office</h2>

 <ul id="list">

 <li> <a href="#">word</li></a>

 <li> <a href="#">excel</li></a>

<li><a href="#">  access</li></a>

   </ul>

فيظهر ناتج المثال:

وعند الوقوف بالماوس على الارتباطات تظهر كما يلى:-