CSS实现横向列表、填充指定区域及固定头部的问题求助

我现在遇到了几个CSS布局的问题，想请大家帮忙看看：我想要把列表改成横向排列，并且让列表填满蓝色的区域，但现在列表项的文字都叠在一起，没法分开；另外我本来想把这个列表做成固定在顶部的头部，但试了display和position属性都没达到预期效果。

以下是我目前的代码：

我的HTML代码 #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="سش.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
  <li>ali1</li>
  <li>ali2</li>
  <li>ali3</li>
</ul>
</body>
</html>

我的CSS代码 #

@charset "utf-8";
ul {
  background-color: aqua;
  width: 100px;
  height: 100px;
  padding: 0px;
  margin: 0px;
  display: block;
  position: fixed;
}
ul li {
  border-top: solid 1px #000;
  position: fixed;
  text-decoration: none;
}
li:last-child{
  border-bottom: solid 1px #000;
}

问题分析与解决方案 #

先帮你梳理下当前代码里导致问题的原因：

• 列表项重叠：你给每个<li>都加了position:fixed，这会让所有列表项脱离文档流，并且默认定位在同一个位置，所以会叠在一起。
• 无法横向排列：<ul>默认是块级元素，<li>默认也是块级，不修改display属性的话自然是垂直排列。
• 固定头部的问题：你给<ul>加了position:fixed是对的，但给<li>也加这个属性就画蛇添足了，反而破坏了布局。

下面是修正后的完整代码，我会标注关键改动：

修正后的CSS代码

@charset "utf-8";
/* 固定头部的列表容器 */
ul {
  background-color: aqua;
  width: 100%; /* 如果你要填满整个页面宽度就用100%，要固定100px宽就改回100px */
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0; /* 固定在页面顶部 */
  left: 0; /* 对齐页面左侧 */
  display: flex; /* 用Flex布局实现横向排列，这是当前最简便的方式 */
  list-style: none; /* 去掉默认的列表圆点 */
  /* 如果需要固定高度可以保留height:100px，否则会自适应内容高度 */
}

ul li {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  flex: 1; /* 让每个列表项平分容器宽度，自动填充蓝色区域 */
  text-align: center; /* 文字居中，提升美观度 */
  padding: 15px 0; /* 增加内边距，避免内容贴边 */
}

关键改动说明

1. 实现横向排列：给<ul>设置display:flex，它的子元素<li>会自动横向排列，无需再给li设置inline-block之类的属性，Flex布局在响应式和均分宽度上更灵活。
2. 解决重叠问题：完全移除<li>的position:fixed，只给容器<ul>设置固定定位，这样列表项会正常留在容器内排列。
3. 固定头部效果：给<ul>加上top:0和left:0，确保它牢牢贴在页面顶部左侧，不会出现偏移。
4. 填充蓝色区域：给<li>设置flex:1，每个列表项会自动平分<ul>的可用宽度，完美填满整个蓝色背景区域；如果你需要<ul>固定宽度（比如原来的100px），这个属性依然有效，列表项会自动均分这个宽度。
5. 细节优化：添加list-style:none去掉默认的列表圆点，给<li>加内边距和文字居中，让整体样式更整洁美观。

如果你想要<ul>只有上下边框而不是每个<li>都有，也可以把边框样式移到<ul>上：

ul {
  /* 其他属性不变 */
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

ul li {
  /* 去掉li的上下边框 */
  border: none;
}

内容来源于stack exchange