浮动元素之间的元素宽度

Question

我是网络开发者的菜鸟，并有一个问题：

我有一个包含4个内联元素的容器：左边是两个按钮，右边是一个按钮，中间是一个搜索框。按钮具有预定义的尺寸（容器的百分比）。我试图避免给搜索框一个预定义的宽度，而我希望搜索框的宽度占据尽可能多的空间，因为它可以在每一侧的浮动元素之间（参考照片），使其更具动态性。

有没有宽度设定技术来实现这一目标？我在添加搜索框之前尝试添加HTML中的所有3个按钮，然后我尝试使用margin-left和margin-right值来扩展搜索框。我对此没有运气。有什么帮助吗？

HTML

        <div class = "SearchBox">
            <input type="image" src="./Home Page Resources/ChapterIcon.png" onclick="alert('Trigger Upload Page')">
            <input type="image" src="./Home Page Resources/UserSearchIcon-2.png" onclick="alert('Trigger Upload Page')">
            <input type="image" src="./Home Page Resources/SearchIcon-2.png" onclick="alert('Trigger Upload Page')">
            <input type="text" name="search">
        </div>

CSS

.SearchBox { 


display: inline-block;
position: relative;
float: right;
min-width: 35%;
height: 40px;
border: thin solid #80501F;
background-image: url("../Home Page Resources/WoodBackground-2.jpg");

border-top-right-radius: 5px;
border-top-left-radius: 5px;

}

.SearchBox input:nth-of-type(1) {
position: relative;
float:left;
width: 35px;
top: 3px;
margin-left: 1%;
margin-right: 0%;
}

.SearchBox input:nth-of-type(2) {
position: relative;
float: left;
width: 38px;
top: 0px;
margin-left: 0%;
margin-right: 0%;
}

.SearchBox  input:nth-of-type(3){

height: 25px;
display: inline;
float: right;
position: relative;
top: 8px;
margin-left: 1%;
margin-right: 1%;

}

.SearchBox  input:nth-of-type(4){

display: inline;
padding-left: 5px;
height: 25px;
font-family: 'Arial Black';
font-size: 100%;
margin-left: auto;
margin-right: auto;
width: auto;



position: relative;
top: 4px;

border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;

}

Answer 1

您可以在容器上使用display:table和在每个嵌套元素上使用display: table-cell。

例如，这里是HTML：

<div class="content">

  <ul>
    <li class="icon">&nbsp;</li>
    <li class="icon">&nbsp;</li>
    <li class="search"><input type="text"></li>
  </ul>

</div>

和CSS：

.content {
  width: 600px;
  background: green;
}

ul {
  background: gray;
  display: table;
  margin: 0;
  padding: 10px;
  width: 100%;
}

li {
  list-style: none;
  display: table-cell;
  margin: 0;
  padding: 0;
}

li.icon {
  background: red;
  width: 10%;
}

li.search {
  width: 80%;
}

li.search input {
  border: 0;
  width: 100%;
}

这是一个JSFiddle来演示：http://jsfiddle.net/mknkz32p/