❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الرئيسية ❯ الأسئلة ❯ كيفية تصميم قائمة أفقية؟

كيفية تصميم قائمة أفقية؟

في المثال الأول في جزء تصميم قائمة أفقية في درس قوائم الروابط تمت الإشارة إلى أنه تم استعمال الخاصية float: left; و الخاصية  overflow: hidden; لتصميم القائمة الأفقية.

لم أفهم كيف تعملان معاً لجعل القائمة العلوية تظهر هكذا، أريد بعض التفصيل في هذا.

<!DOCTYPE html>
<html>
    <head>
        <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #282a35;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: black;
}
        </style>
    </head>
    <body>
        <h1>Horizontal Navigation Bar</h1>
        <ul>
            <li><a href="#home">Home</a>
            <li><a href="#services">Services</a>
            <li><a href="#contact">Contact</a>
            <li><a href="#about">About</a>
        </ul>
    </body>
</html>
HTML CSS Programming

احمد محمد بشير

تعليقات 1

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.