中间元素与盒子允许的一样宽

Question

大家好，我需要你们的帮助。

我目前正在做一个小项目，这样我就可以学习 "Atomic Design"。

我现在遇到了问题。

我有一个table。

<table class="search-table">
                    <tr>
                        <td colspan="2">
                            <form class="search">
                                <button class="icon-button enabled"><p class="default"><i class="fa fa-plus" aria-hidden="true"></i></p></button>
                                <input type="text" class="search enabled" placeholder="Suchen...">
                                <input type="submit" class="button enabled default" value="Suchen">
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <th>Tabellenkopf (1)</th>
                        <th>Tabellenkopf (2)</th>
                    </tr>
                    <tr>
                        <td>Zeile (1)</td>
                        <td>Zeile (1)</td>
                    </tr>
                </table>

table 的宽度设置为 100%，我希望 input type="text" 与其余 space 允许的一样宽。 button 和 input type="submit" 具有固定宽度。

我已经设置了

input[type="text"] {
    width: auto;
    min-width: 0;
    display: inline-block;
    overflow: hidden;
  }

并尝试 float:right input type="submit" 但 input type="text" 总是将按钮推到下一个 "row"。

似乎没有任何效果。

Answer 1

在这种情况下，Flex box 是你的朋友，添加 display:flex; 到表单和 flex-grow:1 到输入文本

您将得到以下结果：

.search-table {
  width: 100%;
}

.search-table form{
  display:flex;
  width:100%;
}

.search-table form input[type="text"]{
    flex-grow:1;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<table class="search-table" border="1">
  <tr>
    <td colspan="2">
      <form class="search">
        <button class="icon-button enabled">
           <i class="fa fa-plus" aria-hidden="true"></i>
        </button>
        <input type="text" class="search enabled" placeholder="Suchen...">
        <input type="submit" class="button enabled default" value="Suchen">
      </form>
    </td>
  </tr>
  <tr>
    <th>Tabellenkopf (1)</th>
    <th>Tabellenkopf (2)</th>
  </tr>
  <tr>
    <td>Zeile (1)</td>
    <td>Zeile (1)</td>
  </tr>
</table>

Answer 2

您也可以使用计算器

 .search-table form input[type="text"]{
        width:calc(100% - 100px);
    }

100px 是按钮的宽度，输入类型="submit"

中间元素与盒子允许的一样宽

Middle element as wide as the box allows

html

css

width

responsive