Question

我有三个输入字段和一个较大DIV中的搜索图形

<div style="vertical-text-align:center;">
<form id="search-form" action="//search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width: 40%; min-width:100px;">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</form> </div>

我希望第三个搜索字段和放大镜图标占据剩余的宽度，因为当我尝试在此小提琴中指定宽度 - https://jsfiddle.net/stndbt2u/2/时，放大镜图形将换行到下一行即使有足够的空间来展示一切。如何始终将放大镜和第三个搜索字段保持在同一条线上并使它们占据可用宽度的其余部分？

请注意，如果小于580像素（父容器的最大宽度），如果第三个搜索字段和放大镜换行到下一行，则它很好，并且更可取。

Answer 1

如果您愿意购买仅支持CSS的解决方案并牺牲与旧浏览器的某种程度的不兼容性，那么CSS flexbox解决方案是您最好的选择。基本上，我们将设置两个场景：

答：当视口大于620px

时

计算：登录表单最大宽度的580px，左右填充的每个20px

我们允许#first_name和#last_name的宽度为20％，允许#event增长以填充剩余空间，并允许.search_button具有固定尺寸40 x 40px。

这意味着以下规则可行：

#search-form {
  display: flex;  /* Enable flexbox */
  flex: 1 0 auto; /* Breakdown:
                     flex-grow: 1 (allow elements to grow)
                     flex-shrink: 0 (prevent elements from collapsing)
                     flex-basis: auto (allow width to determine element dimensions)
                  */
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

B：当视口小于620px

时

与上述计算相同。

Flexbox默认情况下不会包装元素，并尝试将它们放在一行上。我们不希望在窄视口方案中出现这种情况，因为您要求将表单分成多行。因此，使用flex-wrap: wrap会强制换行（某种意义上的换行符）。

我们仍然希望#first_name和#last_name占据全宽。我们只需使用width: 50%即可累计100%。由于已启用换行，请确保其总和不超过100% - 如果要添加边框（不在输入元素上使用box-sizing: border-box;）和/或边距，则需要使用{{1确保处理这些额外的空格。

在第二行，我们有width: calc(50% - x)和#events。我们仍然希望将.search_button保持在40px宽，但希望.search_button展开以填充第二行的所有空间。这可以通过在#events上声明width: calc(100% - 40px)来完成。

请记住将所有这些内容包含在#events查询中，@media设置为620px：

max-width

对于概念证明小提琴，请参阅此链接：https://jsfiddle.net/teddyrised/382fhxpc/。请注意，我已删除@media (max-width: 620px) { #search-form { flex-wrap: wrap; } #first_name, #last_name { width: 50%; } #event { width: calc(100% - 40px); } }和其他内联CSS样式。我们尽量避免使用内联CSS。

我还将一个示例嵌入了代码段：

＆＃13;

display: table

＆＃13;

body {
  background-color:grey;
}

#logo {
  margin: 0 auto;
  padding: 10px;
}

#searchForm {
  padding: 20px;
}

#search-form {
  display: flex;
  flex: 1 0 auto;
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

#loginLogos {
  margin: 0 auto;
  padding: 20px;
}

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  
  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

＆＃13;

Answer 2

解决方案：https://jsfiddle.net/stndbt2u/5/

只需将 float：left 添加到输入中，并将图像的最大宽度添加到10％（因为您已经有25 + 25 + 40）。如果您希望第三个输入和图像在表单宽度不足时转到下一行，请在媒体查询中将 clear：left 添加到第三个输入。

这是代码：

#search-form input{
  float:left;
}
input.search_button {
  max-width:10%;
}
@media (max-width: 580px) {
  input#event {
    clear:left;
  }
}

Answer 3

您需要在一个包装中设置包装所有输入（具有相对位置）并以百分比设置它们的宽度并为玻璃设置绝对位置。看：

＆＃13;

body{
  background:#ccc;
}
.parent-wrapper{
  float:left;
  width:100%;
  text-align:center;
}
#searchForm, #searchForm *{
  box-sizing: border-box;
  outline:none;
}
#searchForm{
  border-radius:5px;
  background:#FFF;
  padding:20px;
  box-sizing:border-box;
  max-width:580px;
  display:inline-block;
}
#searchForm form{
  width:100%;
  position:relative;
}
#searchForm .input{
 padding:0 5px;
  float:left;
  width:25%;
}
#searchForm .search-wrapper{
  width:50%;
  float:left;
  padding-right:50px;
}
#searchForm .search-wrapper .input{
 width:100%;
}
#searchForm .searchField{
  float:left;
  border-radius:5px;
  border:1px solid #ccc;
  padding:0 10px;
  height:40px;
  width:100%;
}
#searchForm .search_button{
  position:absolute;
  right:0;
}
@media (max-width: 400px) {
 #searchForm .search-wrapper,#searchForm .search-wrapper .input {
    width:100%;
  }
  #searchForm form{
    padding-right:0;
  }
  #searchForm .input {
    width:50%;
  }
  #searchForm .search-wrapper{
    margin-top:10px;
  }
}

＆＃13;

<div class="parent-wrapper">
<div id="searchForm">
	Search For Results<br> 
	<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
        <div class="input">
		<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
        </div>
      <div class="input">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
       </div>
       <div class="search-wrapper">
       <div class="input">
		<input type="text" name="event" id="event" placeholder="Event" class="searchField">
        </div>
		<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
     </div>
      <div style="clear:both;"></div>
</form>
	</div>
  </div>

＆＃13;

和wrapp在bootstraps中输入使用列和添加box-sizing的内容。最好只检查和学习我提供的样式。

Answer 4

使用Chrome＆＃34; Inspect＆＃34;检查小提琴上的页面函数显示父容器（表单标记的id =＆＃34; search_form＆＃34;）的宽度为540像素，不是580像素< / em>的

此外，似乎在每个输入文本元素之间添加了额外的间距，以在这些元素之间添加另外6个像素。

添加两个名称输入（2 X 135）的宽度，事件输入（216），放大镜图标（40）以及这些元素之间的额外间距（3 X 6），得出 a总计544像素。由于此宽度大于父容器宽度，因此最后一个元素（放大镜图标）将被推送到下一行。

我怀疑显示：输入元素的类定义使用的table-cell CSS。相反，尝试使用display：inline-block并查看是否减少了输入元素之间的间距。

如果这不起作用，则需要进行其他一些宽度调整，以便父容器可以将所有这些元素保存在一行上。

如何告诉我的HTML两个元素应该占用剩余的剩余可用宽度？

4 个答案:

答：当视口大于620px

B：当视口小于620px