使用引导响应设计使两个html元素保持在同一行

可能很简单的CSS，但我已经看了很久了

我希望在同一行上有两个元素：

• 文本框
• 搜索图标图像

无论宽度如何，搜索图标都应该保持相同的大小，文本框应该100%对齐（但仍然要确保图标就在它旁边）

我的问题可以在这张图片中看到（由于文本框的100%宽度，它们不会对齐）：

我的标记：

<div class="SearchBox">
                        <div class="searchDiv">
                            <div class="searchDivFullSpan">
                                <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
                            </div>
                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
                        </div>
                </div>

有什么提示吗？非常感谢：-）

嗯

将图标放置在带有绝对位置的输入字段上怎么样？
或者更好的解决方案是这样的：

---

如果没有，这将有助于制作小提琴。

我现在无法测试这一点，但是下面的东西呢：

 .searchDiv{
       padding-left: 25px; //MAKE THIS THE WIDTH OF YOUR IMAGE PLUS A BIT EXTRA
       position:relative;
  }

  .searchDivFullSpan input[type=text] {
        width: 100%;
  }

  input[type="image"]{
      width: 20px; //ADJUST THIS, BUT ADJUST ABOVE IN TANDEM
      position:absolute; 
      top:10px;  //FIDDLE WITH THESE TWO PROPERTIES AS NEEDED
      left:5px;

  }

试试这个：

CSS代码：

.SearchBtn{
    display:inline-block;
    float:right;
    bottom:24px;
    position:relative;
}
.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

<div class="SearchBox">
   <div class="searchDiv">
      <div class="searchDivFullSpan">
         <input type="text" id="SearchOnGoogleBox"/>
      </div>
      <input type="button" value="Click" class="SearchBtn"/>
   </div>
</div>

HTML代码：

.SearchBtn{
    display:inline-block;
    float:right;
    bottom:24px;
    position:relative;
}
.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

<div class="SearchBox">
   <div class="searchDiv">
      <div class="searchDivFullSpan">
         <input type="text" id="SearchOnGoogleBox"/>
      </div>
      <input type="button" value="Click" class="SearchBtn"/>
   </div>
</div>

---

您应该尝试显示表格单元格，而不是内联。您将需要另一个容器div。然后将searchDiv和searchDivFullSpan宽度都设置为100%。searchDiv的两个子div都需要设置为显示表格单元格

.SearchInputBox{
边框：1px实心#C6D1AD；
字号：20pt；
背景色：#FAFAFA；
}
.searchDiv{
填充顶部：10px；
左侧填充：10px；
右边填充：10px；
}
.searchDiv分区{
显示：表格单元格；
}
.searchDivFullSpan{
宽度：100%；
}
.searchDivFullSpan输入[类型=文本]{
宽度：100%；
}
.searchDiv输入[type=“text”]{
背景色：#F3E9；
-moz边界半径：5px；
边界半径：5px；
}

---

我不知道它是否有用，但看看这个例子，我使用的是bootstrap 3：

<div class="form-inline" style="display: block;">
  <input type="text" id="text-field-1" class="form-control" size="4" max="4" min="4">
  <input type="text" id="text-field-2" class="form-control" size="3" max="3">
  <button class="btn btn-info form-control" type="button" id="search">
      <i class="fa fa-search"></i>
  </button>
</div>

---

通过将class=“form inline”添加到container Div，您可以强制所有内容保持在同一行中，但如果您想强制元素始终并排显示，则必须添加display:block，无论显示分辨率有多小。

许多很好的答案，但您的解决方案帮助最大。谢谢！我更喜欢这个anwser，因为其他答案都是为了重新发明Bootstrap中已经存在的东西