关于ol标签覆盖h1、p、img标签的技术咨询

Hey there, let's get this layout sorted out for you. The core problem causing your elements to overlap is invalid HTML structure—<ol> (ordered list) tags can only have <li> elements as their direct children. Shoving <h3>s straight into the <ol> breaks the standard list structure, which confuses the browser's rendering engine and leads to those messy overlaps with your <h1>, images, and other content.

Step 1: Fix the HTML Structure #

Here's the corrected code, with each <h3> properly wrapped in a <li> (the only valid direct child of an ordered list):

<img src="pictorial-01.PNG" class="logo left"><br>
<hr>
<div class="why-us"> <!-- Fixed the class name: spaces aren't allowed in CSS class names -->
  <h1 style="text-align: left; font-size: 50px;">Why us</h1>
  <ol>
    <li><h3>Multi-lingual, scalable talent pool</h3></li>
    <li><h3>Positive Attitude</h3></li>
    <li><h3>Agents with little to no accent</h3></li>
    <li><h3>Cost efficient quality operations</h3></li>
    <li><h3>Government support for the industry</h3></li>
  </ol>
  <img src="Egypt-Flag-Map-MEast-Africa.PNG" alt="Egypt Flag Map"> <!-- Added alt text for accessibility -->
</div>

Quick note: I also changed the why us class to why-us—CSS class names can't have spaces, since spaces signal descendant selectors. Your original code would've tried to target a <us> element inside a .why container, which is definitely not what you wanted.

Step 2: Check for CSS-Related Overlap #

If you still see overlapping after fixing the HTML, dig into these common CSS culprits:

• Uncleared floats: Your logo has a left class (probably with float: left). If you don't clear this float before the .why-us container, the container might wrap around the floated image, making content overlap. Add this to your CSS:

  .why-us {
    clear: both;
    /* Add any other custom styling here */
  }
  

• Misconfigured positioning/margins: Check if your <ol>, <li>, or <h3> elements have position: absolute (which yanks elements out of the normal document flow) or excessive/negative margins that push content into other elements.
• Default browser styles: Browsers add default padding to <ol>s. If this throws off alignment, reset it to your preference:

  ol {
    padding-left: 2rem;
    margin: 1rem 0;
  }
  

Fixing the HTML structure first (the main offender here) and tweaking these CSS points should get your layout rendering cleanly without overlaps.

内容的提问来源于stack exchange，提问作者Omar Soliman