html - 将 span 元素的高度设置为 100%

Question

我目前正在为一款软件构建主题/风格。

目前，代码如下所示：

http://jsfiddle.net/afseW/1/

相关代码为：

body div[type*=privmsg] .sender {
    font-weight: 700;
    width:134px;
    text-shadow: #fff 0px 1px; 
    background-color: #eee;
    min-height:22px;
    border-right: 1px solid #dcdcdc;
    padding-right:5px;
    text-align:right;
    display:inline-block;
    overflow: auto;
}

请注意，在小提琴中，由于某种原因，文本折叠到第二行，而在客户端中，图像如下所示：

当然，跨度并不意味着是一个块，因此我赋予它以下属性：display: inline-block;

但是如何获得继承父 p 块的高度？

Answer 1

我改变了 DOM 结构。查看内联样式。在第一个（.message）中，我更喜欢添加类div的更好解决方案，请参阅this。.clearfix

<div class="message" type="privmsg" style="overflow: auto;">
  <div class="sender-cont" style="width: 30%; float: left;">
    <span class="sender" ondblclick="Textual.nicknameDoubleClicked()"   oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
  </div>

  <div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
  </div>
</div>

希望这可以帮助！

Answer 2

由于跨度是一个设定的宽度，所以这里最简单的做法可能就是让跨度具有绝对位置。

body div[type*=privmsg] .sender,
body div[type*=action] .sender {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    ...
}

然后向父元素添加填充：

body span.message {
    position: relative;
    padding-left: 140px;
    ...
}

http://jsfiddle.net/afseW/3/

PS：下次请在jsfiddle中提供一个精简版，这里的html和css非常史诗。