如何使div与其内容一起成长？

Question

我知道有数以百万计的问题，但没有办法真正帮助我。首先是我的代码和我的fiddle（非常简化，因为它来自GWT）：

<div class="row">
<div class="inline minfirst">Password</div>
<div class="inline min">
    <div class="inline"><input type="text" class="text pwd" /></div>
    <div class="inline"><button class="toggleButton pwdToggle" /></div>
</div>

.row {
    padding-top: 5px;
}

.inline {
    display: table-cell;
    vertical-align: middle;
}

.minfirst {
    min-width: 200px;
}

.inline.minfirst {
    font-size: 0.85em;
}

.min {
    min-width: 380px;
}

.text {
    border-radius: 22px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
}

.pwdToggle {
    text-align: right;
    float: right;
    margin-left: 30px;
}

.pwd {
    height: 1.85em;
    width: 100%;
    font-size: 0.6em;
}

.toggleButton {
    width: 65px;
    height: 34px;
    font-weight: bold;
}

我想要实现的是内部输入的div占用div的剩余空间，其中“inline”和“min”类，输入应占用div内的所有空间。但现在发生的事情是输入比它的父div大，这使得一切都表现得很奇怪。

Answer 1

我希望您非常了解CSS财产box-sizing: border-box;。

您已将padding input字段与width:100%字段一起提供height，从而导致额外width以及div，以及为什么大于其父GUID。

此处JSFiddle  我已经编辑了，请检查。

Answer 2

一般问题是你有没有表的表格单元格。 如果您将外部.row定义为具有100％宽度的固定表，那么您就可以了。

我创建了fiddle

.row的新代码是：

class Sync.CommentShow extends Sync.View

  # OVERRIDE
  afterInsert: ->
    commentsCount += 1;
    $('#counter-div').text(commentsCount);

  # OVERRIDE
  afterRemove: ->
    commentsCount -= 1;
    $('#counter-div').text(commentsCount);

看看： - ）