单选按钮和标签封闭 tag to display in same line (only using HTML)

问题描述 投票：0回答：2

我希望我的单选按钮和标签位于同一水平线上。我正在使用xmp标签将原始html显示为带有单选按钮的选项。但是xmp中的文本从新行开始。有没有替代xmp标签。

       `<input class="answer" type="radio" name="q3" value="0">
        <label><xmp>The <head> section</xmp></label>
        <br></br>
        <input class="answer" type="radio" name="q3" value="1">
        <label><xmp>Both <head> section and the body section are 
        correct</xmp></label>
        <br></br>
        <input class="answer" type="radio" name="q3" value="0">
        <label><xmp>The <body> section</xmp></label>
        <br></br>
        <input class="answer" type="radio" name="q3" value="0">
        <label>None of these</label>`

Here's how the gui looks like

html5
2个回答
0
投票

意识到：

<xmp>元素用于包围应该呈现的HTML示例文本，而不解释开始和结束<xmp>标记之间的任何HTML元素。该元素在HTML 3.2中已弃用，现已过时。 <xmp>旨在将内容完全呈现为类型，而不压缩空格。

相反，如果要求标签包含非功能性HTML标记，则应使用&lt;作为小于标记，使用&gt;作为grearter而不是标记：

<input class="answer" type="radio" name="q3" value="0">
<label>The &lt;head&gt; section is here</label>
<br />
<input class="answer" type="radio" name="q3" value="1">
<label>2nd section goes here</label>
<br />

这使：

output

还请注意，<br></br>可以简称为：<br />虽然这些不适合在页面上布置元素，但我认为这超出了这个问题的范围。

可以找到here的完整可用字符列表。

-1
投票

可能值得一看Bootstrap的Form documentation。

启用Bootstrap就像将其放在文档的head部分一样简单：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha256-azvvU9xKluwHFJ0Cpgtf0CYzK7zgtOznnzxV4924X1w=" crossorigin="anonymous" />

然后，您可以使用文档中的示例。

例如，这是一个很好地呈现的登录表单：https://jsfiddle.net/h4sdpqtg/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.