1

这是我的第二个问题，我只是不知道如何编辑它并使其在列表中出现，还是自动发生？...

无论如何，对于实际问题，我在一个跨度内都有一个图像和输入框，现在我想将它们显示在彼此旁边。

图像为 48x48，输入字段应填充剩余宽度。由于现在的代码不会在缩放时中断，它应该是这样的。

如果我添加宽度：100%；到输入框，然后它会在缩放时中断，我不明白为什么我希望它填充剩余宽度的 100%。

HTML：

<div id="vault_chat">
    <div id="vault_chat_header">
        <span class="user_avatar"><img src="<%tdir%>img/default_avatar.png" alt="Default Avatar" /></span>
        <span class="vault_chat_text_field"><input type="text" value="Enter a message..." /></span>
    </div>
</div>

CSS：

#vault_chat {

}

#vault_chat_header {
    height: 48px; //tried a fixed height here but it just goes outside the header.
}

.vault_chat_text_field input[type=text] {
    vertical-align: top;
}

.user_avatar img {
    width: 48px;
    height: 48px;
}

如果您有解决方案，请在小提琴中为我演示。

4

1 回答 1

0

如果我理解正确，我会使用 Nicole Sullivan 的media对象抽象。这是一个小提琴（供参考）。

HTML：

<div class="media">
  <a href="#" class="img"><img src="http://placehold.it/48x48" alt="" /></a>
  <div class="bd"><input type="text"></div>
</div>

CSS：

.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}
input {
  width: 100%;
}
于 2013-11-29T20:20:19.700 回答