Question

我有一个内部有表格的div。该表格只是一个文本输入和一个按钮。但是，当我将textinput的宽度设置为例如100％时，它仅占div的三分之一。我无法用表格的两部分填充div。 div的右侧总是有一个很大的空白。当textinput大于任意特殊大小时，按钮将被推到下一行。

#searcharea {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  height: 40px;
  width:300px;
  background-color: #0000FF;
}

#textinput {
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  display: inline-block;
  height: 35px;
  border: none;
  width: 100%;
  background-color: #00FF00;
  float: left;
  box-sizing: border-box;
}

#button {	
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width: 20%;
  height: 35px;
  display: inline-block;
  float: right;
  box-sizing: border-box;
}

<div id='searcharea' >
  <form method='GET' style='display:inline-block'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

我希望textinput和button可以填满整个div。但是，当我将textinput的宽度设置为最多80％时，该按钮就紧挨着它放置，就像意图一样。但是它们仅占div的一半。当宽度大于80％时，按钮将移至下一行。

以下是这两种情况的图片： https://unsee.cc/c3a6cf03/

Answer 1

在表单上使用 Display：flex ，并将 flex-basis：100％分配给“ #textinput”。

#searcharea {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  height: 40px;
  width:300px;
  background-color: #0000FF;
}

#textinput {
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  display: inline-block;
  height: 35px;
  border: none;
  flex-basis: 100%;
  background-color: #00FF00;
  align-self: center;
 
  box-sizing: border-box;
}

#button {	
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width:50px;
  height: 35px;
  display: inline-block;
  float: right;
  box-sizing: border-box;
   align-self: center;
}

<div id='searcharea' >
  <form method='GET' style='display:flex'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

Answer 2

从html中的style='display:inline-block'元素中删除form

#searcharea {
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    border: 3px solid black;
    border-radius: 20px;
    display: inline-block;
    height: 40px;
    width:300px;
    background-color: #0000FF;
}

#textinput {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    display: inline-block;
    height: 35px;
    border: none;
    width: 100%;
    background-color: #00FF00;
    float: left;
    box-sizing: border-box;
}

#button {   
    background-image: url("images/searchtool.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #FF0000;
    border: none;
    width: 20%;
    height: 35px;
    display: inline-block;
    float: right;
    box-sizing: border-box;
}

<div id='searcharea' >
  <form method='GET'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

Answer 3

这是另一种解决方案。

您在表单上使用flexbox，对于其子级（文本框和搜索按钮），您使用flex：0 0 auto和flex：1.

这意味着按钮的宽度将由css设置（宽度：50像素；），并在输入上设置flex：1，这意味着它将占用所有可用空间减去按钮的宽度。因此，即使您增加/减少容器的宽度（#searcharea），搜索表单仍将正确显示。

#searcharea {
  
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  
  width:300px;
  background-color: #0000FF;
}
.searchform{
  display:flex;
  align-items:center;
}
#textinput {
  height: 35px;
  display: inline-block;
  border: none;
  outline:none;
  padding:0px 8px;
  border-radius:20px 0 0px 20px;
  flex:1;
  background-color: #00FF00;
  box-sizing: border-box;
}

#button {
flex: 0 0 auto;
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width:50px;
  height: 35px;
  box-sizing: border-box; 
}

<div id='searcharea' >
  <form method='GET' class="searchform">
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

为什么div中有空格？

3 个答案: