文章/答案/技术大牛

发布

社区首页 >问答首页 >我如何告诉我的HTML，两个元素应该占据剩余的可用宽度的其余部分？

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

Stack Overflow用户

提问于 2016-10-04 17:05:30

回答 4查看 315关注 0票数 7

我在一个较大的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像素(父容器的最大宽度)，它很好，更好，如果第三个搜索字段和放大镜包装到下一行。

html

css

input

width

word-wrap

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-10-06 22:14:42

如果您愿意接受只使用CSS的解决方案，并牺牲与旧浏览器的某种程度的不兼容，那么CSS柔性盒解决方案是您的最佳选择。基本上，我们会设定两种方案：

答:当视口大于620 is时

计算:登录表单的最大宽度为580 max，左侧和右侧为20 max。

我们允许#first_name和#last_name的宽度为20%，允许#event增长以填补剩余空间，而.search_button的固定维数为40到40 by。

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

#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 */

当视口小于620 is时

和上面的计算相同。

默认情况下，Flexbox不对元素进行包装，而是尝试将它们放在一行中。我们不希望这种行为出现在狭窄的视口场景中，因为您请求将表单拆分为多行。因此，使用flex-wrap: wrap将强制包装(从某种意义上说是断线)。

我们仍然希望#first_name和#last_name占据全部宽度。我们可以简单地使用width: 50%，这样它们就可以加起来成为100%了。由于已启用包装，请确保它们的和不超过100%-if--您正在添加边框(而不对输入元素使用box-sizing: border-box; )和/或边距，您将需要使用width: calc(50% - x)来确保这些额外的空间得到处理。

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

请记住将所有这些都封装在@media查询中，并将max-width设置为620 in：

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

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

有关概念的证明，请参阅以下链接：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>

票数 5

Stack Overflow用户

发布于 2016-10-10 16:18:33

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

只需添加浮动:左到输入，最大宽度为10%的图像(因为你已经有25+25+40)。如果您希望在表单宽度不够时将第三个输入和图像转到下一行，请在媒体查询中向第三个输入添加清除:左侧。

这是代码：

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

票数 2

Stack Overflow用户

发布于 2016-10-04 17:22:25

您需要在一个包装器中设置所有输入(具有相对位置)，并为它们设置宽度(百分比)，并为玻璃设定绝对位置。看：

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>

以及包装输入，比如在引导程序中，使用列并添加框大小。最好是检查并学习我提供的风格。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39858021

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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