CSS में Div में एक क्षैतिज सूची कैसे केंद्रित करें

लेखक: Laura McKinney
निर्माण की तारीख: 2 अप्रैल 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
E-Commerce Product Slider Using HTML CSS and JavaScript
वीडियो: E-Commerce Product Slider Using HTML CSS and JavaScript

विषय

एक वेब पेज बनाते समय, सीएसएस को हॉरिजॉन्टल लिस्ट जैसे कि क्लिक करने योग्य मेनू में इस्तेमाल करना उपयोगी हो सकता है। आप अपने पेज की उपस्थिति को नियंत्रित करने के लिए HTML के बगल में सीएसएस, जो एक स्टाइल शीट भाषा है का उपयोग कर सकते हैं। सीएसएस शैलियों को अक्सर विभिन्न वेब ब्राउज़रों में अप्रत्याशित रूप से प्रदर्शित किया जाता है, इसलिए इसे पोस्ट करने से पहले अपने पृष्ठ को अच्छी तरह से जांचना महत्वपूर्ण है। एक अनियंत्रित सूची (उल) एक ब्लॉक-स्तरीय तत्व है, इसलिए आप एक केंद्रीकृत प्रभाव बनाने के लिए चौड़ाई संपत्ति का उपयोग कर सकते हैं।


दिशाओं

आप अपने वेबपेज की उपस्थिति को नियंत्रित करने के लिए CSS और HTML का उपयोग कर सकते हैं (Comstock / Stockbyte / Getty Images)
  1. अपनी HTML फ़ाइल को एक पाठ संपादक में खोलें, जैसे कि विंडोज नोटपैड।

  2. निम्नलिखित कोड जोड़कर अपनी HTML फ़ाइल के "" खंड में क्षैतिज सूची में आवश्यक CSS शैलियाँ जोड़ें:

    टाइप = "टेक्स्ट / सीएसएस"> .माइक्लास {पाठ-संरेखित करें: केंद्र; } .myclass ul {चौड़ाई: 275px; मार्जिन: 0px ऑटो}। साइक्लास ली {प्रदर्शन: ब्लॉक; फ्लोट: बाएं; ऊंचाई: 50 पीएक्स; लाइन-ऊँचाई: 50 पीएक्स; मार्जिन: 5 पीएक्स; चौड़ाई: 125 पीएक्स; सीमा: ठोस 1px काला; }

    सूची की चौड़ाई (उल) चौड़ाई का योग और क्षैतिज वस्तुओं (ली) के मार्जिन का प्रतिनिधित्व करती है।

  3. निम्नलिखित कोड को जोड़कर HTML फ़ाइल के ">" अनुभाग में एक क्षैतिज सूची बनाएं:

    • पहला आइटम
    • div में दूसरा आइटम

    "उल" टैग एक अनियंत्रित सूची को निर्दिष्ट करता है। "ली" टैग सूची में एक आइटम से मेल खाता है। सूची आइटम सीएसएस शैलियों का उपयोग करते हैं जो ऊपर परिभाषित किए गए लोगों से मेल खाते हैं।


  4. HTML फ़ाइल को सहेजें और क्षैतिज, केंद्रित सूची देखने के लिए इसे अपने वेब सर्वर पर लोड करें।