假设我有一个用户列表，每个用户都附有一些数字。每个用户都是这样列出的:
<span><a href="/user/Niet">Niet</a> ⇒ 2</span>
它们的样式都是:
.userlist>span {
display: inline-block;
padding: 2px 6px;
border: 1px solid currentColor;
}
这是一个实际的例子:
好吧，这看起来不错，用户列表可能会变得很长，所以这里的紧凑性很重要。我的问题是右边缘非常不一致，所以我想知道是否有任何方法可以改进它。
当然，我的第一个想法是在 span 上设置一个固定的宽度。然而，用户名宽度并不是完全可以预测的。你可以找一个叫 iiiii 的人有人叫WWWWW但由于这不是等宽字体，您会得到“iiiii”和“WWWWW”，那里的宽度明显不同。所以“最大宽度”基本上是允许的最宽字符，即 W , 乘以最大用户名长度。让我们试试看...
呃。我不妨使用 <ul>如果那是我要得到的结果。下一个想法可能涉及 display:table。让宽度在各列之间保持一致，同时仍然保持动态 - 假设大多数人都有合理的用户名(*咳嗽* ... 哦嘿，这就是你如何逃避 Markdown ... 呵呵 ...)最终仍然有很多空白空间。
所以我目前的想法是某种对齐方式。这对文本很有效，对吧？但是，唉，text-align: justify在这种情况下确实完全错误，可能是因为要对齐的元素之间没有空格。
我最后的尝试是使用 flexbox，我已经在网站的新设计中使用了它，效果很好。让我们看看 display: flex; flex-wrap: wrap; 的样子在容器上，和 flex: 1 0 auto;关于元素...
嗯，看起来还不错。一点都不差-
……嗯。很近。我真正想要的是最后一行元素不会一直 flex 。最后一行有三四个没关系，但是两个看起来有点傻，一个就填满了整个宽度，看起来很可笑。
所以我想这整个小冒险归结为一个简单的问题:
我怎样才能实现类似对齐对齐的行为，其中元素被隔开以使用容器的整个宽度，除了最后一行它们应该使用其自然宽度？
为了完成这个小故事，感谢@Michael_B 的回答，以下是我实现解决方案的方式:
.userlist:after {
content: '';
flex: 10 0 auto;
}
结果:
美丽。
最佳答案
使用 flexbox，创建 3 或 4 个总是占据最后一个位置的“幻影”元素。
因此，例如，用户 #82 当前是您的最后一个条目。
使用 visibility: hidden 制作虚假用户 83、84、85。
或者，尝试在末尾只使用一个幻影元素，并设置 visibility: hidden 和 flex-grow: 10。使用 :last-child 或 :last-of-type 伪类作为目标。
关于html - 在最后一行正确调整 flex 元素的大小和对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34928565/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用