Question

当我调整浏览器大小时，该按钮会从文本框内部分解并进入其下方。如何将其始终保留在文本框中？谢谢！

＆＃13;

#search-row {
  padding-top: 45px;
  text-align: center;
  padding-bottom: 200px;
  margin-right: 45px;
  width: auto;
}

#search {
  width: 575px;
  height: 70px;
  position: relative;
}

#submit {
  margin-left: -100px;
  margin-top: 20px;
  position: absolute;
}

＆＃13;

<div id="search-row">
  <input id="search" type="search" placeholder="What instrument do you want to learn" />
  <button id="submit" type="submit">Search</button>
</div>

＆＃13;

Answer 1

这会导致长搜索堆叠在按钮后面，浏览器会自动完成显示。

为什么不使用内联表单？使用flexbox它很容易就像馅饼一样

＆＃13;

#search-row {
 margin-top: 45px;
 display:flex;
  border: 1px solid grey;
}

#search {
  flex: 1 1 auto;
  padding: 1em;
  border:0;
}

＆＃13;

<div id="search-row">
    <input id="search" type="search" placeholder="What instrument do you want to learn"/>
    <button id="submit" type="submit">Search</button>
</div>

＆＃13;

无论如何，制作你想要的东西而不会遇到太多麻烦也很容易：

＆＃13;

#search-row {
  border: 1px solid grey;
  position:relative;
}

#search {
  width:100%;
  padding: 1em; padding-right: 80px; 
  border:0; 
}

#submit{
 position:absolute;
 right:1em; 
  top:50%; transform:translateY(-50%);
}

＆＃13;

<div id="search-row">
    <input id="search" type="search" placeholder="What instrument do you want to learn"/>
    <button id="submit" type="submit">Search</button>
</div>

＆＃13;

只需确保在#search上调整padding-righ，以便文本不会在按钮后面，并且浏览器自动完成的X按钮保持在按钮的左侧。并使用经典顶部：50％变换：translateY（-50％）使按钮居中

Answer 2

您参考此链接最佳解决方案。

https://jsfiddle.net/1jxkyLdv/

在这里演示代码。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 1rem;
}

h1 {
  margin: 2rem 0 0;
}


/* Flexbox Example 
    **************************************************************************/

.flexbox {
  display: flex;
}

.flexbox .stretch {
  flex: 1;
}

.flexbox .normal {
  flex: 0;
  margin: 0 0 0 1rem;
}

.flexbox div input {
  padding: .5em 1em;
  width: 100%;
}

.flexbox div button {
  padding: .5em 1em;
  white-space: nowrap;
}

<h1>Short Word</h1>
<section class="flexbox">
  <div class="stretch">
    <input type="text" placeholder="Search..." />
  </div>
  <div class="normal">
    <button>Search</button>
  </div>
</section>

<h1>Long Word</h1>
<section class="flexbox">
  <div class="stretch">
    <input type="text" placeholder="Search..." />
  </div>
  <div class="normal">
    <button>Super Long Word For Search Button With Flexbox!</button>
  </div>
</section>

内部输入文本框和按钮无响应

2 个答案: