如何将 HTML 选择选项文本分组到列中

2024-02-06

我有一个 HTML 选择选项,其中的文本我想分组为对齐的列。我尝试使用内联块:

<select>
  <option><span div="display:inline-block;width:3em;">A:</span><span style="display:inline-block;width:5em;">Lorem Ipsum</span>
  </option>
  <option><span div="display:inline-block;width:3em;">AA:</span><span style="display:inline-block;width:5em;">Fusce efficitur ante</span>
  </option>
</select>

我想得到输出:

A   Lorem Ipum
AA  Fusce efficitur ante

有没有 Twitter Bootstrap 可以解决这个问题?


不幸的是,我们无法设置样式 https://stackoverflow.com/questions/7208786/ for option元素,除了background-color and color.

但我们可以尝试使用&nbsp;和等宽字体courier.

select, option {
  font-family: courier;
}
<select>
  <option>A:&nbsp;&nbsp;Lorem Ipsum</option>
  <option>AA:&nbsp;Fusce efficitur ante</option>
</select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 HTML 选择选项文本分组到列中 的相关文章

  • 可编辑的 Div 插入位置

    我有一个可编辑的 div 我正在使用一个按钮将图像插入到该 div 中 现在 我只是在做 document getElementById elementid innerHTML 为了将图像添加到 div 的末尾 我想输入插入符号所在的图像
  • php 在内容前插入十六进制字符数

    我正在将网站移动到新服务器 旧服务器有 php 5 3 2 新服务器有 php 5 5 9 Centos httpd Apache 2 2 26 我已经复制了文件 它工作正常 除了唯一奇怪的事情 一些奇怪的十六进制数字被插入到页面内容之前
  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac
  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • html 音频标签,持续时间总是无穷大

    我一直在研究使用 html 音频标签来播放一些音频文件 音频播放正常 但音频标签的持续时间属性始终返回无穷大 我尝试了接受的答案this https stackoverflow com questions 16849023 html5 au
  • Twitter Bootstrap 按钮的水平和垂直分离

    是什么导致 Twitter Bootstrap 的按钮水平分离 我在 CSS 代码中找不到它 我试图对垂直方向重复相同的操作 但似乎我未能实现这一目标 如何在按钮之间添加垂直分隔 仅当它们垂直堆叠时 第二张图片 但当它们不是 第一张图片 时
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei
  • 如何以“打印”模式查看 Google 地图?

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生
  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都
  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合,同时又尊重更大的缩放系数?

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 使用js获取选择选项的onclick事件

    我有一个非常令人沮丧的问题 我有这个代码 它过滤掉我的结果并将它们输入到选择框中 var syn
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi
  • HTML:JavaScript:阻止表单提交并调用 Javascript 函数

    我想在按下表单中的提交按钮时进行 AJAX 调用 事实上我无法删除

随机推荐