Community
    • Login

    Problem in CSS alignment in same line . css not working

    Scheduled Pinned Locked Moved Help wanted · · · – – – · · ·
    4 Posts 3 Posters 528 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Labib MahmoodL
      Labib Mahmood
      last edited by

      Hey my html file is working but my css file not working please help me. Like i want to align all of these order list in the right side and also in same line.
      Please help me my assignment Due date is soon.
      555dbe53-ae89-459a-a121-05c44a7b1e4f-image.png

      Alan KilbornA 1 Reply Last reply Reply Quote 0
      • Alan KilbornA
        Alan Kilborn @Labib Mahmood
        last edited by Alan Kilborn

        @labib-mahmood

        See HERE.

        1 Reply Last reply Reply Quote 0
        • Zain KhanZ
          Zain Khan
          last edited by

          To align all the ordered lists (ol) to the right side and make them appear in the same line, you can use CSS Flexbox. Here’s how you can do it:

          <div class="container">
            <ol>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ol>
            <ol>
              <li>Item A</li>
              <li>Item B</li>
              <li>Item C</li>
            </ol>
            <ol>
              <li>Item X</li>
              <li>Item Y</li>
              <li>Item Z</li>
            </ol>
          </div>
          
          
          .container {
            display: flex;
            justify-content: flex-end; /* Aligns the ol elements to the right */
          }
          
          ol {
            display: inline-block; /* Ensures that each ol appears in the same line */
            margin: 0; /* Removes default margin */
            padding: 0; /* Removes default padding */
          }
          
          

          Explanation:

          We wrap all the <ol> elements inside a container <div> for easier styling.

          We apply display: flex; to the container to use a flexbox layout.
          justify-content: flex-end; aligns the items to the right within the container.
          Each <ol> is styled with display: inline-block; to ensure they appear in the same line.

          We reset default margins and paddings on the <ol> elements to avoid unwanted spacing.

          Make sure to link your HTML file to the CSS file correctly. If you still face issues, ensure that your CSS file is properly referenced in your HTML file using the <link> tag within the <head> section:

          <head>
            <link rel="stylesheet" type="text/css" href="styles.css">
          </head>
          
          

          Replace “styles.css” with the actual path to your CSS file.

          Alan KilbornA 1 Reply Last reply Reply Quote 0
          • Alan KilbornA
            Alan Kilborn @Zain Khan
            last edited by

            @Zain-Khan

            The original query was a non Notepad++ related question.
            Please don’t answer those type of questions, it only encourages people to ask any kind of question here, when we want to focus on Notepad++ discussion.

            1 Reply Last reply Reply Quote 3
            • PeterJonesP PeterJones locked this topic on
            • First post
              Last post
            The Community of users of the Notepad++ text editor.
            Powered by NodeBB | Contributors