问题标签 [pure-css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - Pure-CSS - 如果文本不适合 div，则完全隐藏文本
在我的示例中，有一个图表，其中有一个改变其宽度的水平条。该条的图例显示在内部，但只要有足够的空间完全显示字符串，就应该可见。
我试图调整父容器（栏，改变宽度），因此具有以下属性：
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
这是代码笔：https ://codepen.io/DerLukas/pen/VwvBbEN
在此示例中，不应显示字符串“BASE”，因为它不适合白条。
javascript - 在移动设备上更改列布局
我有一个导航菜单，由 3 列组成，每列 33% 宽。在移动设备上，我希望每列都是 100% 宽并重新排列列，以便中间列位于所有其他列之上。
通过查看下面的示例，更容易看到我想要实现的目标。你知道当屏幕宽度小于 500 像素时，我如何重新排列中间列，使其位于所有其他列之上？如果有一个很棒的 css 解决方案，我相信我可以很容易地在 Javascript 中实现这一点，如果可能的话，我只是更喜欢 CSS2/CSS3 的想法。
html - 树视图结构CSS节点位置问题
CSS：-
请找到此链接示例。
我是 CSS 新手。
下图的 CSS 在下图的示例链接中给出。
我的问题是“body”单元格和“head”单元格应该与“html”单元格等距。
现在“body”单元格更接近“html”单元格。
我应该在 CSS 代码中修改什么？
请看图片
ruby-on-rails - 如何让 Rails 6 与 PureCSS 和 WebPacker 一起工作
我正在尝试将使用 PureCSS 样式表的 Rails 5 应用程序升级到带有 Webpacker 的 Rails 6，除了蛮力方法之外，我所做的任何事情都无法完成这项工作。
我有这些行application.html.erb
我不得不下载所有的 PureCSS 并将文件放在app/assets/stylesheets
然后我不得不将每个文件列为导入，application.js如图所示
我试图通过将进口转移到app/assets/stylesheets/application.css
application.css但这无论我尝试要求还是导入application.js都不起作用
import "../../assets/stylesheets/application.css"
或者
require("../../assets/stylesheets/application.css")
真的，我本来希望purecss-sass宝石继续工作，但我真的不明白为什么它不工作？
肯定有更好的方法吗？
sticky-footer - 使用纯 CSS 的带有粘性页脚的两个全高列布局
我正在挣扎，这似乎是一个相当简单的挑战。
我需要设计简单的布局，要求是：
- 纯 CSS（没有 flex-box，没有网格，只有 CSS - 没有库）
- 固定正文/包装宽度（1024px，居中）
- 固定列宽
- 列拉伸 100% 高度，即使没有内容
- 粘性页脚（附在底部）
- 表格不能使用
我在这里遇到了很多关于堆栈溢出的答案，但似乎没有什么能像我想要的那样完全有效。这是方案：
html - 如何使用纯 CSS 制作手绘铅笔圈？
实际上，我正在寻找使用纯 CSS 而不使用 SVG 的手绘铅笔圆圈悬停效果。就像CodeMyUi 上的这个。但这是使用 SVG 实现的，我只想使用纯 CSS 创建它。请如果有人知道这个回答我。
css - 用于交互式水平滚动网站的最佳软件是什么？
我希望为我们的一个慈善项目创建一份社会影响报告，作为“演练”交互式滚动体验，类似于此处的出色报告 Mailchimp：https ://mailchimp.com/annual-report/
我看过 Pure CSS 示例并且精通 HTML 和 CSS，但我希望有一些设计软件（比如 Dreamweaver？）可以实现相同的用户体验，而无需繁琐的编码。
任何建议都感激不尽！
css - 如何用纯 css 覆盖 hsl 亮度
我有一个由标题包裹的导航
有了这些款式
导航颜色是标题颜色，但更暗
我想更改标题颜色但标题颜色不会改变我已经想到了
或者也许使用filter
我想我可以使用变量，但我想知道是否有办法覆盖或修改亮度（我认为亮度属性不一样）
html - 表格的 4 个步骤的圆形进度条
查找循环进度以指示用户在 4 中的哪一步。
比如 4 中的第 1 种形式、4 种中的第 2 种形式、4 种中的第 3 种形式、4 种中的第 4 种形式
以下是预期内容的屏幕截图。
我得到了几个里面有两个 div 的例子。CSS 进度圈
在我只需要 4 个步骤的情况下，我认为这很复杂。
html - 使用 CSS 的多级下拉菜单
我一直在尝试做一个多级下拉菜单，但是当悬停在第一级项目上时无法显示第二级。当悬停在第一级项目上时，我想显示一些文本。我必须使用<li>标签吗？
这是我到目前为止得到的。在其他地方尝试了<abbr>标签（我希望将这些下拉菜单中的几个放在一起），但这不是我想要实现它的方式，我相信这也不是使用<abbr>标签的正确方式。
<p>在标签下方添加标签<a>并将css添加到它p { display: none; }，然后a:hover p { display: block; }不起作用。
请指教，感谢任何帮助！