容器div文本溢出与样式继承问题解决方案咨询

问题分析 #

你遇到两个核心问题：

• body的样式通过CSS继承影响到container内的元素
• p标签内连续无空格文本超出容器边界
• 未实现body灰色背景、container绿色背景的预期效果

修正后的代码 #

CSS代码

body {
  width: 100%;
  color: #A4A7A5;
  background-color: #ccc; /* 添加灰色背景，符合预期 */
  margin: 0; /* 去除默认margin，避免页面留白 */
}

#container { /* 修正选择器，去掉多余的div空格，直接选中id元素 */
  background-color: #63EC91; /* 设置容器绿色背景，原color改为背景色，符合需求 */
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}

ul {
  list-style: none;
  background-color: black;
  margin: 20px;
  text-align: center;
  padding: 20px;
}

li {
  text-align: center;
  font-size: 1.5em;
  font-family: Roboto;
  display: inline;
  color: white;
  padding: 20px;
}

li a {
  text-decoration: none;
  color: lightgrey;
  padding: 20px;
}

li a:hover {
  background-color: lightgreen;
}

#container .FCR {
  width: 20%;
  text-align: center;
  color: lightgrey;
  font-size: 1.5em;
  font-family: Roboto, Arial;
  word-break: break-all; /* 解决连续文本溢出问题，强制换行 */
  margin: 0 auto; /* 让p块级元素居中，和其他元素对齐 */
}

p {
  text-align: center;
  color: lightgrey;
  font-size: 0.8em;
  font-family: Roboto, Arial;
}

h1 {
  margin: 20px;
  padding: 0;
  text-align: center;
  color: lightgrey;
  font-size: 1.5em;
  font-family: Roboto, Arial;
}

HTML代码（无需修改，保持原结构）

<div id="container">
  <ul>
    <li><a href="pocetna1.html">Pocetna</a></li>
    <li><a href="onama1.html">O nama</a></li>
    <li><a href="kontakti1.html">Kontakti</a></li>
    <li><a href="galerija1.html">Galerija</a></li>
  </ul>
  <h1>Meni stranica</h1>
  <hr>
  <br>
  <p class="FCR"> FCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCR</p>
</div>

关键修改说明 #

1. 容器样式修正：

   • 把div #container改为#container，简化选择器同时确保正确选中目标容器
   • 将原color: #63EC91改为background-color: #63EC91，实现绿色容器背景的需求

2. body样式补充：

   • 添加background-color: #ccc实现灰色背景
   • 去除body默认margin:0，避免页面边缘留白

3. 文本溢出解决：

   • 给.FCR类添加word-break: break-all，强制连续无空格文本换行，防止超出容器
   • 给.FCR添加margin:0 auto，让p元素作为块级元素居中，和h1、ul对齐

4. 样式继承控制：

   • 容器内的h1、p、li等元素已经单独设置了color，不会继承body的文字颜色，解决样式渗透问题

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