我正在尝试使一个按钮在输入元素上完全扩展。我似乎无法弄清楚。我尝试使用绝对：位置；而且这似乎没有用，我尝试了其他一些似乎比我可能需要的更复杂的方法，并且在大多数情况下不起作用
这是我目前拥有的代码：
.s-btn {width:40px;height:40px;} .expand > span {display:none;} .expand:hover > span {display:inline-block;} .expand:hover {width:100%;} .transition { /*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; }<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/><div class="w3-container"> <h2>Help</h2> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container" style="overflow:hidden;padding:50px 0;"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">×</span> <form class="w3-container" style="width:80%;margin:0 auto;"> <!-- Trouble Area: --> <button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button> <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code"> <!-- END: --> <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button> </form> </div> </div> </div></div>
在这里，按钮像我想要的那样将按钮扩展到100％，但我想在输入字段的顶部扩展。
以下是我希望它看起来的示例，但当然可以实现输入字段的全部宽度。
<style> .s-btn {width:40px;height:40px;} .expand > span {display:none;} .expand:hover > span {display:inline-block;} .expand:hover {width:250px;} .transition { /*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; }<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/><div class="w3-container"> <h2>Help</h2> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container" style="overflow:hidden;padding:50px 0;"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">×</span> <form class="w3-container" style="width:80%;margin:0 auto;"> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px;"><button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button></div> <div class="w3-rest"> <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code"> </div> </div> <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button> </form> </div> </div> </div></div>
任何帮助将受到赞赏，谢谢。
您可以绝对将按钮放在 input，并触发宽度的变化 :hover 它将扩展到 input
.s-btn { width: 40px; height: 40px; position: absolute;}.s-btn + .w3-input { margin-left: 45px; width: auto; width: calc(100% - 45px);}.w3-container { position: relative;}.expand > span { display: none;}.expand:hover > span { display: inline-block;}.expand:hover { width: calc(100% - 32px); z-index: 1;}.transition { /*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;}<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/><div class="w3-container"> <h2>Help</h2> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container" style="overflow:hidden;padding:50px 0;"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">×</span> <form class="w3-container" style="width:80%;margin:0 auto;"> <!-- Trouble Area: --> <button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button> <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code"> <!-- END: --> <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button> </form> </div> </div> </div></div>
这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
我想找到给定字符串中的所有匹配项，包括重叠匹配项。我怎样才能实现它？#Example"a-b-c-d".???(/\w-\w/)#=>["a-b","b-c","c-d"]expected#Solutionwithoutoverlappedresults"a-b-c-d".scan(/\w-\w/)#=>["a-b","c-d"],but"b-c"ismissing 最佳答案 在积极的前瞻中使用捕获:"a-b-c-d".scan(/(?=(\w-\w))/).flatten#=>["a-b","b-c","c-d"]参见Rubyde
我想查找字符串的结尾是否与单独字符串的开头重叠。例如，如果我有这两个字符串:string_1='Peoplesaynothingisimpossible,butI'string_2='butIdonothingeveryday.'如何找到string_1末尾的“butI”部分与string_2开头相同？我可以编写一个方法来遍历这两个字符串，但我希望得到一个包含我错过的Ruby字符串方法或Ruby习惯用法的答案。 最佳答案 将MARKER设置为一些从未出现在您的string_1和string_2中的字符串。有一些方法可以动态地做到这一
我的ruby脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes
基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub
我在ruby表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St
我正在为我的用户实现一些rubyonrails代码推特内容。我正在创建正确的oauth链接...类似http://twitter.com/oauth/authorize?oauth_token=y2RkuftYAEkbEuIF7zKMuzWN30O2XxM8U9j0egtzKv但在我的测试帐户授予对twitter的访问权限后，它会弹出一个页面，上面写着“您已成功授予对.我不知道用户应该在哪里输入此PIN以及他们为什么必须这样做。我认为这不是必要的步骤。Twitter应该将用户重定向到我在应用程序设置中提供的回调URL。有谁知道为什么会这样？更新我找到了thisarticle声明我需
我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac
我知道我能做到:(1..30).cover?(2)=>true但是当我尝试对另一个范围执行相同操作时，它总是返回false:(1..30).cover?(2..3)=>false所以我的问题是-是否有任何优雅的方法来比较ruby中的两个范围？在我的例子中，我想检查两个日期时间范围是否重叠。提前致谢。 最佳答案 给定范围A的两个范围重叠，当:范围B从范围A开始，范围B在范围A内结束或范围B在范围A之前开始，在范围A之后结束例子:RangeA|-----||-----|Case1|-----|Case2|-|Case1+2|----
