Question

我想在同一行显示标签，输入文件和提交按钮。输入文件需要大小（这意味着它将在父级更改大小时更改大小，而不能拖动以调整大小）。我试图使用display：table和display：table-cell，由于某种原因它适用于其他组合但不适用于此

＆＃13;

    <div style="display:table;">
        <label style="display: table-cell; width: 80px;">Text</label>
        <input type="file" style="display:table-cell; width: 100%;"/>
        <input style="display: table-cell; width:50px;" type="submit" value = "Upload"/>
    </div>

＆＃13;

这是小提琴：https://jsfiddle.net/danbenedek/wxn976oe/2/

这是最初的小提琴：http://jsfiddle.net/danbenedek/un9qae0x/1/，我从那里获得灵感，但所有的元素都是div，它起作用。我把它们改成标签并输入它的那一刻就停止了工作。

Answer 1

这是一个片段。我希望这就是你所期待的。

＆＃13;

.Row {
  width: 100%;
  table-layout: fixed;
  float: left;
}

.Column {
  display: inline-block;
  background-color: red;
  resize:both;
}

＆＃13;

<div class="Row">
  <label class="Column">Text</label>
  <input class="Column" type="file" />
  <input class="Column" type="submit" value="Upload" />
</div>

＆＃13;

Answer 2

您可以浏览以下代码段，我认为您的问题将得到解决。

＆＃13;

.Column {
  background-color: red;
}

＆＃13;

<div class="Row">
  <label class="Column">Text</label>
  <input class="Column" type="file" />
  <input class="Column" type="submit" value="Upload" />
</div>

＆＃13;

Answer 3

这是你想要的吗？

https://jsfiddle.net/wxn976oe/4/

.Column {
  background-color: red;
  float: left;
}
label.Column {
    width: 80px;
}
input[type="submit"] {
    width: 50px;
}
input[type="file"] {
    width: calc(100% - (80px + 50px));
}

<div class="Row">
    <label class="Column">Text</label>
    <input class="Column" type="file"/>
    <input class="Column" type="submit" value = "Upload"/>
</div>

Answer 4

喜欢这个吗？

.Column {
  display: inline;
  background-color: red;
}

<div class="Row">
  <label class="Column" style="width: 80px;">Text</label>
  <input class="Column" type="file" />
  <input class="Column" style="width:50px;" type="submit" value="Upload" />
</div>

相同行上的大小输入文件和提交按钮

4 个答案: