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

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>

我希望第三个搜索字段和放大镜图标占据剩余的宽度，因为当我像在 Fiddle — https://jsfiddle.net/stndbt2u/2/ 中那样尝试指定宽度时，放大镜即使有足够的空间显示所有内容，图形也会换行到下一行。如何始终将放大镜和第三个搜索字段保持在同一行并让它们占据剩余的可用宽度？

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

Answer 1

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

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

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

和 wrapp inputs 就像在 bootstrap 中一样，使用列并添加 box-sizing。最好只检查和学习我提供的样式。

Answer 2

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

A：视口大于620px时

Calculations: 580px of the max-width of the login form, and 20px each of the left and right paddings

我们允许 #first_name 和 #last_name 的宽度为 20%，允许 #event 增长以填充剩余的 space，并且对于 .search_button 的固定尺寸为 40 x 40 像素。

这意味着以下规则将起作用：

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

Same calculations as above.

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

我们仍然希望 #first_name 和 #last_name 占满宽度。我们可以简单地使用 width: 50%，这样它们加起来就是 100%。由于启用了换行，请确保它们的总和不超过 100%——如果要添加边框（不在输入元素上使用 box-sizing: border-box;）and/or 边距，则需要使用 width: calc(50% - x) 以确保这些额外的 space 得到处理。

在第二行，我们有 #events 和 .search_button。我们仍然希望 .search_button 保持 40px 宽，但希望 #events 扩展以填充第二行的所有 space。这可以通过在 #events.

上声明 width: calc(100% - 40px) 来完成

记得将所有这些包装在一个 @media 查询中，并将 max-width 设置为 620px:

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }

  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}

有关概念验证 fiddle，请参阅此 link：https://jsfiddle.net/teddyrised/382fhxpc/。请注意，我已删除 display: table 和其他内联 CSS 样式。如果可能的话，让我们尽量避免使用内联 CSS。

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

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

<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br />
    <div>
      <form id="search-form" action="/events/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">
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField">
        <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
      </form>
    </div>
  </div>
</div>

Answer 3

解决方案：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 4

使用 Chrome 的 "Inspect" 函数检查 Fiddle 上的页面显示 父容器（id= "search_form") 宽度为 540 像素，不是 580 像素。

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

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

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

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

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

How do I tell my HTML that two elements should occupy the rest of the remaining width available?

html

css

input

width

word-wrap

A：视口大于620px时

B：视口小于620px时