Question

嘿伙计们，我需要你的帮助。

我目前正在开展一个小型项目，以便我可以学习＆＃34; Atomic Design＆＃34;。

我现在遇到了一个问题。

我有一张桌子。

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

表的宽度设置为100％，我希望input type="text"与剩余空间允许的宽度一样宽。 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"始终将按钮推到下一行＆＃34;行＆＃34;。

似乎没什么用。

Answer 1

在这种情况下，Flex框是您的朋友，将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

您也可以使用calc

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

100px是按钮的宽度，输入类型=＆＃34;提交＆＃34;

中间元素与盒子一样宽

2 个答案: