如何用HTML/CSS修复两组列表高度与宽度不一致问题

问题分析与解决方法 #

1. 先修正代码里的错误（这是布局混乱的核心诱因）

• HTML标签错误：第二个<ul>里的<li>Løvbjerg</p>标签闭合错误，应改为</li>；另外<ul>的直接子元素只能是<li>，你在<ul>内嵌套<p>的写法不符合规范，浏览器会自动修正DOM结构，导致布局失控。
• CSS拼写错误：margin-buttom是笔误，正确写法为margin-bottom。

2. 列表宽高不一致的解决方案

方案一：固定宽度+垂直对齐（适合简单布局）

给列表设置固定宽度，同时修正inline-block的默认对齐问题：

ul.lister {
  display: inline-block;
  text-align: left;
  margin: 0;
  width: 45%; /* 根据页面需求调整宽度值 */
  vertical-align: top; /* 解决inline-block元素基线对齐导致的垂直错位 */
}

方案二：Flex布局（更推荐，适配性更强）

给两个列表的父容器添加Flex属性，让列表自动平分宽度：

/* 包裹两个列表的父容器样式 */
.list-container {
  display: flex;
  gap: 20px; /* 控制两个列表的间距 */
}

ul.lister {
  flex: 1; /* 让两个列表平分可用宽度 */
  text-align: left;
  margin: 0;
}

修正后的完整HTML示例

<div class="list-container">
  <div class="list-group">
    <h3>Jeg ønsker mig... (snacks edition)</h3>
    <ul class="lister">
      <li> FaxeKondi (gerne i ramme).</li>
      <li> Saltede peanuts </li>
      <li> Corny Müslibar m. banan og chokolade</li>
      <li> MælkeChokolade</li>
      <li> HvidChokolade</li>
    </ul>
  </div>

  <div class="list-group">
    <h3>Jeg ønsker mig... (gavekort edition)</h3>
    <ul class="lister">
      <li> Sport24</li>
      <li> Normal</li>
      <li> Løvbjerg</li>
      <li> Føtex</li>
      <li> Lidl</li>
      <li> Aldi</li>
      <li> MacDonals</li>
      <li> Netto</li>
    </ul>
  </div>
</div>

如果需要强制两个列表高度一致，可给.list-group添加height: 100%;或min-height: 300px;（数值按需调整）。

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