使用 Bootstrap 响应式设计使两个 html 元素保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18494431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make two html elements stay on same line using Bootstrap responsive design
提问by Lars Holdgaard
Probably easy CSS, but I've looked at this for WAY to long now.
可能很简单的 CSS，但我已经看了很久了。
I want to have two elements on same line:
我想在同一行上有两个元素：
- Textbox
- Search icon image
- 文本框
- 搜索图标图像
The search icon should stay same size no matter width, the textbox should align 100% of the space (but still make sure the icon is right next to it.
无论宽度如何，搜索图标都应保持相同大小，文本框应对齐 100% 的空间（但仍要确保图标就在它旁边。
My problem can be seen in this image (they will not align because of the 100% width of textbox):
我的问题可以在这张图片中看到（由于文本框的 100% 宽度，它们不会对齐）：
My markup:
我的标记：
<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>
My css:
我的CSS：
.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;
}
Any hints? Would really appreciate it :-)
任何提示？真的很感激:-)
采纳答案by innerurge1
You should try display table-cell rather than inline. You will need another container div. Then give both searchDiv and searchDivFullSpan width of 100%. Both child divs of searchDiv need to be set to display table-cell.
您应该尝试显示表格单元格而不是内联。您将需要另一个容器 div。然后将 searchDiv 和 searchDivFullSpan 的宽度都设置为 100%。searchDiv 的两个子 div 都需要设置为显示表格单元格。
.SearchInputBox {
border: 1px solid #C6D1AD;
font-size: 20pt;
background-color: #FAFAFA;
}
.searchDiv {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.searchDiv div {
display: table-cell;
}
.searchDivFullSpan {
width: 100%;
}
.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">
<asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
</div>
<div class="searchImageDiv">
<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>
</div><div class="SearchBox">
<div class="searchDiv">
<div class="searchDivFullSpan">
<asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
</div>
<div class="searchImageDiv">
<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>
</div>
<style>
.SearchInputBox {
border: 1px solid #C6D1AD;
font-size: 20pt;
background-color: #FAFAFA;
}
.searchDiv {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.searchDiv div {
display:table-cell;
}
.searchDivFullSpan {
width:100%;
}
.searchDivFullSpan input[type=text] {
width: 100%;
}
.searchDiv input[type="text"] {
background-color: #f3f3e9;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
回答by innerurge1
I don't know if it helps but look at this example, I'm using bootstrap 3:
我不知道它是否有帮助，但看看这个例子，我使用的是引导程序 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>
By adding class="form-inline" to the container Div you're forcing everything to stay in the same line, but you have to add display:block if you want to force the elements to always stay side by side no matter how small is you display resolution.
通过将 class="form-inline" 添加到容器 Div，您将强制所有内容保持在同一行，但如果您想强制元素始终并排放置，无论元素多小，则必须添加 display:block你是显示器分辨率。
回答by Mister Epic
I can't test this at the moment, but what about something like:
我现在无法测试这个，但是像这样的东西呢：
.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;
}
回答by Unknown
Try this:
尝试这个：
CSS CODE:
代码：
.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;
}
HTML CODE:
HTML代码：
<div class="SearchBox">
<div class="searchDiv">
<div class="searchDivFullSpan">
<input type="text" id="SearchOnGoogleBox"/>
</div>
<input type="button" value="Click" class="SearchBtn"/>
</div>
</div>
回答by chris
Hmm,
唔，
what about placing the Icon over the input field with position absolute?
Or maybe a better solution is something like this:
将图标放在绝对位置的输入字段上怎么样？
或者也许更好的解决方案是这样的：
Two divs: one fixed, other stretched
two divs side by side, one 100% width others width depended on content
If this not will help make a fiddle.
如果这不是将有助于制作小提琴。
