嵌入HTML和CSS后，登录用户关联模块仅显示最后一行的问题

Hey there, let's break down why your module list is only showing the last item after adding full CSS—this is a common gotcha, usually tied to how your HTML structure interacts with styles, or a tiny oversight in your PHP loop output. Let's walk through the fixes step by step:

1. First, Verify Your HTML Output (Rule Out PHP Logic) #

Before blaming CSS, confirm your PHP is actually outputting all module entries. Right-click the page → View Page Source and search for your module elements.

If you only see the last module in the source, the problem is in your PHP loop, not CSS. For example, if you're overwriting a variable instead of appending to it:

// ❌ Wrong: Overwrites the variable every loop
$module_output = "";
foreach ($user_modules as $mod) {
  $module_output = "<div class='module-item'>{$mod['moduleID']}: {$mod['moduleName']}</div>";
}
echo $module_output;

// ✅ Correct: Appends each item to the output
$module_output = "";
foreach ($user_modules as $mod) {
  $module_output .= "<div class='module-item'>{$mod['moduleID']}: {$mod['moduleName']}</div>";
}
echo $module_output;

2. If HTML Is Correct, Diagnose CSS Conflicts #

If all modules exist in the source but only the last one shows, CSS is hiding or overlapping the rest. Use your browser's DevTools (F12) to inspect the missing items:

Common CSS Culprits:

• Overlapping elements from absolute positioning:
  If your .module-item uses position: absolute without unique positioning values, every module will stack on top of each other, leaving only the last one visible. Fix it by using normal flow layout:

  /* ❌ Wrong */
  .module-item {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* ✅ Correct */
  .module-item {
    display: block;
    margin: 4px 0; /* Add spacing between items */
  }
  

• Container height collapse from floating elements:
  If you used float on module items but didn't clear the float on their parent container, the parent will have zero height, and items might get clipped or hidden. Add a clearfix to the parent:

  .module-container::after {
    content: "";
    display: table;
    clear: both;
  }
  

• Hidden elements from display/visibility rules:
  Check if any CSS rules are setting display: none, visibility: hidden, or opacity: 0 on all but the last module. Sometimes styles with :last-child selectors can accidentally override default visibility.

3. Quick Test to Confirm CSS Is the Issue #

Temporarily remove all your custom CSS (or comment it out) and reload the page. If all modules show up, you know exactly where to focus your debugging.

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