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;
}

请注意，在 fiddle 中，出于某种原因，文本折叠到第二行，而在客户端中，图像看起来像这样:

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

但是如何获取继承父p block 的高度呢？

Answer 1

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

<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>

希望这对您有所帮助!