- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这部分样式,一个相对内联 block 元素,里面有一个绝对元素:
<div style="display:inline-block;position: relative">
<div style="position:absolute">
<input type="text" />
<input type="button" value="submit" />
</div>
</div>
一种情况也不太不寻常,可以在 CSS 下拉菜单中看到,但不是使用 float:left
到 li
元素,而是使用 display :内联 block
。
为什么在这种特定情况下,绝对 block 内的输入被换行?而且,如果您尝试删除分配的属性之一(从位置到显示),它不会突然换行吗?以及如何在不改变样式结构的情况下解决?
<div style="display:inline-block;position: relative">
<div style="position:absolute">
<input type="text" />
<input type="button" value="submit" />
</div>
</div>
最佳答案
具有position:absolute
的元素具有收缩以适合 行为。如果你写一个长句子,你会注意到同样的想法,它会在每个单词上中断:
<div style="display:inline-block;position: relative">
<div style="position:absolute">
aaaa bbb ccc ddd eee fff
</div>
</div>
来自 the specification :
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
在这种情况下,可用宽度 将为 0,因为包含 block 是 inline-block
(它的宽度为 0,因为它唯一的子元素已从流中删除) , 所以 max
将是首选的最小宽度 并且首选的宽度 肯定会更大因此我们将以首选的结束最小宽度。
删除 inline-block
或 position:relative
将改变包含 block 的宽度或包含 block 因此可用宽度将更改,它将被选中而不是首选的最小宽度,因为在这两种情况下我们都将以 block
元素作为包含 block 结束。
使用 float:left
而不是 inline-block
将创建相同的输出,因为 float 的宽度也等于 0:
<div style="float:left;position: relative">
<div style="position:absolute">
aaaa bbb ccc ddd eee fff
</div>
</div>
避免这种情况的一种简单方法是使用 white-space:nowrap
来避免所有可能的换行符,首选最小宽度 将简单地等于 首选宽度。
<div style="float:left;position: relative">
<div style="position:absolute,white-space:nowrap;">
aaaa bbb ccc ddd eee fff
</div>
</div>
关于html - 为什么所有内容都在嵌套在 float 或内联 block 元素内的绝对元素内自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54346873/
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它, 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在,我想写入文件 2 中的行,否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id,SUB(row, row - 1),其中user_id=@userid我的表用户,id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法,但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心,该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式,使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白,但效果不佳。 最
下面的代码从数据库中获取我需要的信息,但没有打印出所有信息。首先,我知道它从表中获取了所有正确的信息,因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我试图在两个表中插入记录,但出现异常。您能帮我解决这个问题吗? 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行,我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码,
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时,不是像您通常期望的那样使用sheet.getCell(row,col),而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统,其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录,但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢? query($q)
我在互联网上寻找答案,但找不到任何答案。 (我可能问错了?)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询,我想从数据库中获取 100 个项目,但 host_id 多次出现在 urls 表中,我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等,直到文本文件结束。例如在第 4 行声明,打印 5-9,跳过 10-14,打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码,但问题是我无法理解为什么我的查询返回零行,而预期它有 1 行。另一件事是,即使我不将密码文本转换为 md5,哈希密码仍然得到正确的答案,但我不知道为什么会发生
我是一名优秀的程序员,十分优秀!