问题标签 [yui-pure-css]

我需要在我正在使用的纯网格中添加排水沟。因为我需要默认情况下它应该只是像这个例子一样的常规纯网格 css：

到目前为止我尝试了什么：

我也试过了，box-sizing但也没有用：

我还必须担心浏览器的支持。不是很好，但如果旧浏览器正确显示它们会很棒。

我正在寻找创建一个博客网站。

我正在寻找可以用于我的博客网站的 CSS 模板。

我发现 purecss.io 博客主题非常好。

如何将其用作我的网站模板

我有以下 SASS 和 HTML 代码。我正在使用 Yahoo 的 PureCSS。

我正在尝试做的事情

我试图让它有一个用于大型桌面尺寸屏幕的 3 列布局，这些pure-lg-3-24类基本上充当边距，然后将其折叠为移动屏幕的 1 列布局。

实际发生了什么

当我添加pure-u-1到下面的类（在大型桌面大小的浏览器宽度中）时，所有 html 内容都落入一列。如果我将pure-u-1其全部删除，则它们会一起折叠并且文本彼此重叠，使其无法阅读。为什么是这样？让它响应式行为的出发点是什么？我认为PureCSS允许嵌套网格。

SASS

HTML

其实我想有这样的下拉菜单水平滚动菜单：

但它不起作用。实际上水平菜单滚动有效，但下拉菜单不起作用（（我发现这是因为 .pure-menu-scrollable 和 pure-menu-has-children 类无法相处。所以此时我可以拥有或滚动菜单或带有下拉菜单的菜单，但不能同时使用两者。

有没有办法让纯菜单既可滚动又可下拉？

如何在以下情况下使用纯 CSS 调整 textarea 的大小，而不破坏表格的整体结构：

标题：

第 1 行：

问题是 Textarea 保持为使用“pure-u-md-1-5 div”类应用的宽度。

当我尝试增加宽度时，例如 style="width:400px"，它不会增加 textarea 的宽度。

如果我尝试增加其 div 的宽度，则文本区域会跳转到下一行。如果我通过将像素从 400px 减少到 490 或 495 来进行调整，那么当我尝试缩放页面时，文本区域会转移到下一行。

如何通过不修改div来增加textarea的宽度？

我正在使用 phantomjs (1.9.8) 来获取项目的屏幕截图。该项目使用纯 CSS 网格进行响应式布局。这是我正在做的一个精简的 HTML 演示：

http://output.jsbin.com/sobabiy/1

这是 phantomjs 看到的（视口 1024x768）：

我的 CSS 技能有点生疏，但我的直觉是不知何故

没有被考虑在内，最后一个节点“下降”。我在这里还有什么其他选择？

来自http://purecss.io/forms/在“分组输入”部分，它只显示垂直/堆叠的分组输入，但是否可以制作水平输入？

我正在尝试创建一个带有传单的全屏地图，并在其上添加一个purecss水平菜单。 这是使地图高度为 100% 的解决方案（也将父元素设置为 100% 高度）。所以现在，我有这样的事情：

CSS

问题是：页面高度是 100% + 菜单的高度。所以地图的一部分在底部被切断了。我使用了 Firefox 的 Inspector 并更改了各种 CSS 设置，但无济于事。我还测试了不同的浏览器以排除 Firefox 的问题。我错过了什么？不幸的是，我不是 CSS 人..

我创建了一个 JSFiddle：http: //jsfiddle.net/jygzLf3v/13/

结果窗口可以滚动到菜单的高度，但应该是“全屏”，包括菜单。感谢您的一些见解。

我想实现一个粘性页脚，因此即使页面内容很短，页脚也位于窗口底部，但会在内容较长的页面上被下推（像这样）。

我在页面上使用 YUI purecss，但标题中的 pure-g div 并没有像往常一样扩展到全宽。

HTML

CSS

这是jsfiddle

是否需要添加一些额外的 css 或更好的方法来实现粘性页脚，同时仍然能够使用 purecss 模块？

JsFiddle：http: //jsfiddle.net/9opb4n03/1/

HTML：

CSS：

您可以看到按钮在 Chrome、IE 甚至 Safari 中按预期显示。箭头显示在按钮文本的右侧。然而，Firefox 在按钮文本和 :after 元素之间插入了一个分隔符。有任何想法吗？（这是我第一次提交 Stack Overflow，如果我忘记包含任何信息，请告诉我。）