使用Bootstrap响应式设计使两个html元素保持在同一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Bootstrap响应式设计使两个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>
我的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;
}
任何提示？真的很感激它:-)
您应该尝试显示table-cell而不是inline。你需要另一个容器div。然后给searchDiv和searchDivFullSpan两个宽度100％。 searchDiv的两个子div都需要设置为显示table-cell。
.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>我现在无法测试这个，但是如下所示：
.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;
}
我不知道它是否有帮助，但看看这个例子，我正在使用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”添加到容器Div，你强迫所有东西保持在同一行，但你必须添加display：block如果你想强制元素总是并排留在一起，无论多小你显示分辨率吗？
试试这个：
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;
}
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>
嗯，
将图标放在位置绝对的输入字段上怎么样？ 或者更好的解决方案是这样的：
Two divs: one fixed, other stretched
two divs side by side, one 100% width others width depended on content
如果这不会有助于制作小提琴。
以上是关于使用Bootstrap响应式设计使两个html元素保持在同一行的主要内容，如果未能解决你的问题，请参考以下文章
响应式网页设计Bootstrap开发速成 从入门到精通学习总结入门教程
学生专用网页响应式网页设计动漫主题 bootstrap响应式设计动漫源码分享 附福利网页下载链接