相关疑难解决方法(0)

我想把a label和a input[type=text]放在同一条线上,我希望input宽度能够填充包含元素的剩余宽度,而不管标签文本的长度如何(见第一张图片).

我试图用width: auto;的input,但它似乎有一个静态的宽度.我也尝试了width: 100%;,但是这会移动input到一个新的线(见第二张图).

如何使用CSS实现这一目标？

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

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

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

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

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

我的标记：

<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

我的CSS：

.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: …