为什么一个块元素中嵌套的多个内联块的innerHTML会影响内联块的定位?

2023-11-30

在这些示例中(注意:确保将结果窗口拖出足够宽)

http://jsfiddle.net/pPyaG/

http://jsfiddle.net/pPyaG/1/

http://jsfiddle.net/pPyaG/2/

为什么内联块元素内的文本数量会影响同一 div 中内联块的位置?

我该怎么做才能确保嵌套在块元素内的所有内联块彼此具有相同的垂直对齐方式?


Add vertical-align: top你在哪里display: inline-block.

http://jsfiddle.net/thirtydot/pPyaG/3/

初始值vertical-align is baseline,这会导致您遇到的问题。

阅读本文,特别是“基线”部分:http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

比较常见的值vertical-align look: http://www.brunildo.org/test/inline-block.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么一个块元素中嵌套的多个内联块的innerHTML会影响内联块的定位? 的相关文章

  • 为什么在 Vue.js 中从列表中删除项目时移动转换需要绝对位置

    https v2 vuejs org v2 guide transitions html List Move Transitions https v2 vuejs org v2 guide transitions html List Mov
  • 带 Bootstrap 选项卡的 Rails

    我有一个 Rails 4 应用程序 我正在尝试合并 Bootstrap 选项卡 阅读引导文档 它说这样做的一种方法不涉及任何js 我已经尝试了文档中的每种方法 但无法让它们在我的应用程序中工作 我目前的尝试是 ul class nav na
  • 如何在不使用 Flexbox 的情况下水平对齐元素?

    有没有一种方法可以在不使用的情况下将 Web 组件彼此相邻对齐Flexbox 我知道它是一个很棒的工具 但不幸的是它不适用于 IE 9 或 10 我希望链接内的文本显示在图像旁边 JSFiddle 显示了工作代码 但是使用 FlexBox
  • 在画布中心写入 (0,0)-HTML5

    I m currently developing a drawing app which allows the user to click and drag to determine the size of the shape and al
  • jQuery Mobile 和文本区域行

    所以 我想展示一个textarea仅 1 行 但 jQuery Mobile 并不这么认为 无论我在rows属性 它始终是 2 行高度 请问有什么解决办法吗 jQuery Mobile CSS 设置了特定的高度textarea要素 text
  • 滚动条宽度:细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb
  • vue基于媒体查询绑定值

    carousel 3d display 3 width 150 height 150 我想根据媒体查询设置属性绑定 e g 当屏幕宽度 gt 960px 时 显示应变为 5 您可以尝试绑定display组件属性的值
  • Javascript - HTML Canvas 上的 Gecko 边框半径自适应(CSS border-radius)

    我试图弄清楚如何将 border radius css 属性的行为重现到 HTML 画布中 所以我已经在 J avascript 中做了一些事情 以便使用特定的半径 对于每个角 来计算给定形状的正确边界 如果需要的话 这是上一个问题 Gec
  • CSS 链接图像带有下划线(“a”显示设置为阻止)

    我有一个菜单 我希望每个单独的项目中文本周围的所有空间都能将用户带到指定的页面 我在网上查了一下 发现最好的解决方案是将 a 显示设置为阻止 如下 a display block height 100 text decoration und
  • 两个 div 之间的垂直线间隔

    所以我有两个div 一个左侧 div 包含导航链接 另一个右侧 div 填充内容 具体取决于您在左侧单击的链接 我希望在导航和内容之间有一条垂直的灰线将两者分开 但我需要它根据右侧内容 div 的长度来改变高度 如果右侧没有导航那么长 则默
  • 如何使用角度在垫选择嵌套值中包含过滤器

    我正在使用带有嵌套下拉菜单的有角材料 下拉值以父级和子级为基础嵌套 我面临两个问题 自动建议不起作用 如果我输入父名称或其关联的子名称 则必须以展开模式过滤并显示特定的父视图 如果我展开第一个父视图并尝试展开第二个父视图 则第一个父视图应在
  • 范围滑块 javascript 以小时和分钟为单位

    我试图分别以小时和分钟为单位显示滑块的值 我对 JS 还很陌生 并且仍在尝试了解它是如何工作的 到目前为止 我所拥有的是一个工作滑块 其最大值为 1440 24 小时内的分钟 在 JS 中 我尝试将其划分为小时和分钟 并使用 innerHt
  • Chrome - 儿童剪辑CSS3圆形边框?

    请参阅以下 JSFiddle http jsfiddle net zScKW http jsfiddle net zScKW 请注意 子 div 剪裁了其父 div 的边框 如果我删除边框 但保留圆角 该项目将按照我们的预期进行剪辑 Fir
  • 为什么 Bootstrap 按钮下拉菜单在 iOS 上不起作用?

    看起来甚至连引导演示在这里 http twitter github com bootstrap components html buttonDropdowns不适用于 iOS 您似乎无法在 iPhone 或 iPad 上从中选择项目 有解决
  • 为什么 Internet Explorer 会使带有 Overflow:hidden 的 div 内的内容消失?

    最里面的 div 内的内容会显示在除 IE 之外的所有浏览器上 为什么 我注意到如果我删除overflow hidden from absolute container 然后里面的内容 item会出现 但出于显示原因 我需要保留 overf
  • style = "position:absolute" 和 style = "position:relative" 之间的区别

    谁能告诉我两者之间的区别style position absolute and style position relative 如果我将其添加到 它们有何不同div span input元素 我在用absolute现在 但我想探索relat
  • 如何获取div背景图像上的锚标记?

    HTML div a href http www facebook com au a div css facey float left width 32px height 32px background url file C Users U
  • 将 WooCommerce 属性标签替换为每个的自定义图像

    我正在做一个项目 我需要一些团体的帮助 我正在使用 woocommerce 产品系统 在商店存档页面产品上我显示属性标签 属性值 就像文本一样 属性标签 属性值 例如传输 手动 有没有办法将属性标签显示为图像 我无法添加 html 代码 i
  • Twitter Bootstrap:按钮下拉列表中的图标

    Here http jsfiddle net DjHyQ 是 jsfiddle 上的链接 其中包含一些演示 它在 Chrome 甚至 IE 中运行良好 但在 FF 中图标会下降 我怎样才能解决这个问题而不用负边距或类似的东西来提升它们 我不
  • 删除 twitter bootstrap 中的行

    我正在使用 twitter bootstrap 来执行一些我被迫执行的网络应用程序 我不是网络开发人员 但我找不到一种方法来禁用表的行线 正如你可以看到引导文档 http getbootstrap com components panels

随机推荐