Невозможно переместить кнопку вправо и развернуть ввод, чтобы заполнить пространство

Question

У меня это HTML:

<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
  <div>
    <label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
    <input type="hidden" name="action" value="bbp-search-request">
    <input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
    <input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
  </div>

  <div class="gdpos-power-link">
    <a href="https://www.publictalksoftware.co.uk/support-forums/search/">Advanced Search</a>
  </div>
</form>

На данный момент это выглядит так:

What I wanted to try and do is move the button to the right and expand the input to fill the space.

• I tried using float:right; with the button and it does indeed move to the right.
• I then tried applying a width: 100%; to the input but it expands to the very right edge and pushing the button down underneath it.

Is it not possible to do what I what? I am not able to change the HTML at this stage and hope to do what I want via CSS adjustments.

Update

When I try this addition CSS:

#bbp-search-form > div {
  display: flex;
}

#bbp-search-form > div input {
  flex: 1;
}

I end up with:

введите описание изображения здесь

Обновление

Я пробовал:

#bbp-search-form > div:first-child {
  display: flex;
}

#bbp-search-form > div:first-child input {
  flex: 1;
}

Кажется, не работает.

Answer 1

Используйте гибкую коробку с гибким ростом

.my-row {
  display: flex;
}

.my-row input {
  flex: 1;
}

<h1>Test</h1>
<div class="my-row">
  <input type="text" />
  <button>Search</button>
</div>

С вашим кодом

#bbp-search-form > div:first-child {
  display: flex;
}

input[name="bbp_search"] {
  flex: 1;
}

<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
  <div>
    <label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
    <input type="hidden" name="action" value="bbp-search-request">
    <input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
    <input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
  </div>

  <div class="gdpos-power-link">
    <a href="https://www.publictalksoftware.co.uk/support-forums/search/">Advanced Search</a>
  </div>
</form>

Обновление

Я обнаружил, что это самый простой CSS для использования:

#bbp-search-form > div:first-of-type { display: flex; }
#bbp-search-form #bbp_search { flex: 1; margin-right: 5px; }
#bbp-search-form #bbp_search_submit { margin-top: 0px; margin-bottom: 0px; }