Marquee标签容器适配问题求助：无法固定滚动范围与边框

问题核心 #

你遇到的问题根源在于marquee本身是滚动元素，直接给它加边框会跟随内容滚动；外层div未做正确样式限制时，无法起到固定容器的作用。另外你CSS里的选择器存在拼写错误（Marqee应为marquee），这也是样式失效的原因之一。

解决方案 #

把边框、内边距等固定容器样式转移到外层div上，同时限制marquee的滚动范围在容器内部：

修正后的HTML代码

<div class="marquee-container">
  <marquee style="color:lime; font-family: 'Courier New', monospace; font-size:10px;" scrollamount="50" behavior="alternate">THIS IS A TEST HTML!</marquee>
</div>

对应的CSS代码

.marquee-container {
  border: 1px solid lime;
  border-radius: 5px;
  padding: 35px;
  /* 可选：设置固定宽度如300px，或用width: fit-content让容器适配内容宽度 */
  width: fit-content;
  overflow: hidden; /* 关键：防止marquee内容溢出容器 */
}

marquee {
  width: 100%; /* 让marquee占满容器宽度，滚动范围被限制在容器内 */
}

说明 #

• 外层.marquee-container作为固定容器，负责边框、内边距和宽度控制，overflow:hidden确保滚动内容不会跑出容器外。
• marquee设置width:100%，让它的滚动区域完全贴合容器，文字在带边框的容器内来回滚动，边框保持固定不动。
• CSS标签选择器需小写且拼写正确（marquee而非Marqee）。

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