投票按钮只有一个img标签,span标签和另一个img标签。当我在一个新页面中尝试这些时,它们出现在同一条线上。 究竟是什么CSS元素导致它们出现在不同的行上?
<img class="vote-up" width="40" height="25" title="This question is useful and clear (click again to undo)" alt="vote up" src="http://sstatic.net/so/img/vote-arrow-up.png"/>
<span class="vote-count-post" title="View upvote and downvote totals" style="cursor: pointer;"> 0 </span>
<img class="vote-down" width="40" height="25" title="This question is unclear or not useful (click again to undo)" alt="vote down" src="http://sstatic.net/so/img/vote-arrow-down.png"/>
答案 0 :(得分:10)
他们正在将display:block
应用于所有三个项目。这很重要,因为默认情况下img
和span
元素是内嵌,与 block p和div
标记不同>默认情况下的元素。
默认情况下display:block
的元素从左到右占据整个空间,并将自己保持在自己的行上,并将其他元素推送到下一行。即使应用了限制其大小的宽度,除非您将position
更改为绝对或float
元素,否则它们仍将保留在自己的行中。
答案 1 :(得分:2)
display:block;
块级元素就是那些 源文件的元素 视觉格式化为块 (例如,段落)。几个值 'display'属性构成一个元素 块级:'block','list-item'和 '磨合'(部分时间;参见磨合 盒子)和'桌子'。
块级元素(除了 显示'table'元素,它们是 在后面的章节中描述)生成 包含的主要块框 要么只是阻止框,要么只是内联 框。主要区块框 建立包含块 后代框和生成的内容 并且也是任何参与的盒子 定位方案。主要块 盒子参加一个街区 格式化上下文。