英文:
How to keep radio button and label in the same line with long label content in HTML/CSS?
问题
分析：您想要将HTML中的单选按钮和标签保持在同一行，但如果标签文本很长，标签会显示在单选按钮下方。
想法：要实现这一目标，您可以使用CSS来控制标签的布局。您可以为标签应用CSS样式，例如display: inline-block;，以确保标签在同一行上显示。
推测：以下是修改后的HTML和CSS示例：
<div class="form-check fs-3 mb-3">
<input id="low-3" name="low-3" type="radio" value="light">
<label for="low-3" style="display: inline-block;">very long very long very long very long context</label>
</div>
汉化后的代码：请注意，这是CSS样式的示例，不需要翻译。
英文:
I have an issue with an HTML radio button and its label. I want to keep the radio button and label in the same line. But if the label text is very long, the label will sit below the radio button.
html:
<div class="form-check fs-3 mb-3">
<input id="low-3" name="low-3" type="radio" value="light">
<label for="low-3">very long very long very long very long context</label>
</div>
How can I keep the label on the same line as the radio button?
答案1
得分: 2
问题
Bootstrap的_reboot.scss文件默认设置label { display: inline-block; }，如下面的截图所示。
解决方案
只需在<label>上设置Bootstrap的d-inline类，它等效于label { display: inline; }。
查看下面的代码片段。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="form-check fs-3 mb-3">
<input id="low-3" name="low-3" type="radio" value="light">
<label class="d-inline" for="low-3">非常长的上下文文本非常长的上下文文本非常长的上下文文本非常长的上下文文本非常长的上下文文本非常长的上下文文本非常长的上下文文本非常长的上下文文本</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
英文:
Problem
Bootstrap's _reboot.scss file sets label { display: inline-block; } by default, as you can see in the screenshot below.
Solution
Simply set the Bootstrap d-inline class on the <label>, which is equivalent to label { display: inline; }.
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="form-check fs-3 mb-3">
<input id="low-3" name="low-3" type="radio" value="light">
<label class="d-inline" for="low-3">very long very long very long very long very long very long very long context</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 1
现在您的标签具有内联块显示属性，因此您的元素位于不同的行上。将输入和标签包装起来，并为标签设置 "d-inline" 类，您的元素将位于同一行。
像这样：
<div>
<input id="low-3" name="low-3" type="radio" value="light" />
<label for="low-3" class="d-inline">非常长非常长非常长非常长的上下文</label>
</div>
英文:
Now your label has inline-block display property so your elements on different lines. Wrap the input and the label and set "d-inline" class for the label and your elements will be on the same line.
Like this:
<div>
<input id="low-3" name="low-3" type="radio" value="light" />
<label for="low-3" class="d-inline">very long very long very long very long context</label>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论