单选按钮和带有<xmp>标签的标签显示在同一行中(仅使用HTML)

时间:2019-02-12 20:46:51

标签: html5

我希望单选按钮和标签在同一水平线上。我正在使用xmp标签将原始html显示为带有单选按钮的选项。但是xmp中的文本以新行开头。除了xmp标签,还有其他选择吗?

 `
        
        

                          

                          

                 `

GUI的外观如下

2 个答案:

答案 0 :(得分:0)

请注意:

  

元素用于包围应呈现的HTML示例文本,而无需在开始和结束<xmp>标记之间解释任何HTML元素。 <strong>该元素在HTML 3.2中已弃用,现在已过时。</strong> <xmp>旨在完全按键入的形式呈现内容,而无需压缩空格。</p> </blockquote> <p>如果您要求标签包含无法正常运行的HTML标签,则应该使用<code>&amp;lt;</code>小于标签,使用<code>&amp;gt;</code>代替标签:</p> <pre><code>&lt;input class=&#34;answer&#34; type=&#34;radio&#34; name=&#34;q3&#34; value=&#34;0&#34;&gt; &lt;label&gt;The &amp;lt;head&amp;gt; section is here&lt;/label&gt; &lt;br /&gt; &lt;input class=&#34;answer&#34; type=&#34;radio&#34; name=&#34;q3&#34; value=&#34;1&#34;&gt; &lt;label&gt;2nd section goes here&lt;/label&gt; &lt;br /&gt; </code></pre> <p>哪个给:</p> <p> <a href="https://i.stack.imgur.com/pqH1x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pqH1x.png" alt="output"/></a> </p> <p>还请注意,<code>&lt;br&gt;&lt;/br&gt;</code>可以简化为:<code>&lt;br /&gt;</code>,尽管它们实际上并不适合在页面上布置元素,尽管我认为这超出了此问题的范围。 / p> <p>可以找到可用字符的完整列表<a href="https://dev.w3.org/html5/html-author/charref" rel="nofollow noreferrer">here</a>。</p> </div> <div class="hr-line-dashed"></div> <p>答案 1 :(得分:-1)</p> <div class="answer markdown-body"> <p>值得一看Bootstrap的<a href="https://getbootstrap.com/docs/4.2/components/forms/" rel="nofollow noreferrer">Form documentation</a>。</p> <p>启用Bootstrap就像将其放入文档的<code>head</code>部分一样简单:</p> <pre><code>&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css&#34; integrity=&#34;sha256-azvvU9xKluwHFJ0Cpgtf0CYzK7zgtOznnzxV4924X1w=&#34; crossorigin=&#34;anonymous&#34; /&gt; </code></pre> <p>然后,您可以仅使用文档中的示例。</p> <p>例如,这是一个很好的呈现的登录表单:<a href="https://jsfiddle.net/h4sdpqtg/" rel="nofollow noreferrer">https://jsfiddle.net/h4sdpqtg/</a> </p> </div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/2306117">单选按钮和标签显示在同一行</a> </li> <li> <a href="/q/14388013">单选按钮和标签对齐在同一行</a> </li> <li> <a href="/q/24386958">同一行中的&lt;img/&gt;和&lt;label&gt;标记&lt;/label&gt;</a> </li> <li> <a href="/q/26733193">在Laravel中用一个标签封闭单选按钮</a> </li> <li> <a href="/q/30899501">强制单选按钮及其标签位于同一行</a> </li> <li> <a href="/q/36444665">标签中间的单选按钮显示</a> </li> <li> <a href="/q/40659596">将单选按钮和标签保持在同一行</a> </li> <li> <a href="/q/48110542">将单选按钮和标签放在同一行中,当标签文本在多行中换行时</a> </li> <li> <a href="/q/54658463">单选按钮和带有&lt;xmp&gt;标签的标签显示在同一行中(仅使用HTML)</a> </li> <li> <a href="/q/55440123">如何将标签和收音机圈放在同一行</a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码,但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值,但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场?</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印?卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用?</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法?</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询,我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源?</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host == "www.thinbug.com") { (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>