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

Question

可能是简单的 CSS，但我已经研究这个很久了。

\n\n

我想在同一行有两个元素：

\n\n

\n
• 文本框
\n
• 搜索图标图像
\n

\n\n

无论宽度如何，搜索图标都应保持相同的大小，文本框应与 100% 的空间对齐（但仍确保图标位于其旁边。

\n\n

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

\n\n

\n\n

我的标记：

\n\n

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

\n\n

我的CSS：

\n\n

.SearchInputBox {\n    border: 1px solid #C6D1AD;\n    font-size: 20pt;\n\n    background-color: #FAFAFA;\n}\n\n.searchDiv {\n    padding-top: 10px;\npadding-left: 10px;\npadding-right: 10px;\n}\n\n.searchDivFullSpan {\n    display: inline;\n}\n\n.searchDivFullSpan input[type=text] {\n    width: 100%;\n}\n\n.searchDiv input[type="text"] {\n    background-color: #f3f3e9;\n    -moz-border-radius: 5px;\n    border-radius: 5px;\n}\n

\n\n

有什么提示吗？真的很感激:-)

\n

Answer 1

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

\n\n

\r\n

\r\n

.SearchInputBox {\r\n  border: 1px solid #C6D1AD;\r\n  font-size: 20pt;\r\n  background-color: #FAFAFA;\r\n}\r\n\r\n.searchDiv {\r\n  padding-top: 10px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n}\r\n\r\n.searchDiv div {\r\n  display: table-cell;\r\n}\r\n\r\n.searchDivFullSpan {\r\n  width: 100%;\r\n}\r\n\r\n.searchDivFullSpan input[type=text] {\r\n  width: 100%;\r\n}\r\n\r\n.searchDiv input[type="text"] {\r\n  background-color: #f3f3e9;\r\n  -moz-border-radius: 5px;\r\n  border-radius: 5px;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

<div class="SearchBox">\n     <div class="searchDiv">\n        <div class="searchDivFullSpan">\n             <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>\n         </div>\n         <div class="searchImageDiv">\n             <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="S\xc3\xb8g efter et emne" Height="48px" OnClientClick="_gaq.push([\'_trackEvent\', \'Global_master\', \'Search for content\']);" />\n          </div>\n\n      </div>\n\n</div>\n\n\n\n<style>\n\n    .SearchInputBox {\n    border: 1px solid #C6D1AD;\n    font-size: 20pt;\n\n    background-color: #FAFAFA;\n}\n\n.searchDiv {\n    padding-top: 10px;\npadding-left: 10px;\npadding-right: 10px;\n}\n\n.searchDiv div {\n  display:table-cell;\n}\n\n    .searchDivFullSpan {\n    width:100%;\n    }\n\n.searchDivFullSpan input[type=text] {\n    width: 100%;\n}\n\n.searchDiv input[type="text"] {\n    background-color: #f3f3e9;\n    -moz-border-radius: 5px;\n    border-radius: 5px;\n}\n</style>\n

\n